移动端网页制作

一、header信息的设置(自适应)
   1、声明信息 <!DOCTYPE HTML>
   2、编码设置 <meta charset="UTF-8">
   3、移动设备特别设置(重要声明!)

<meta content="width=device-width,user-scalable=no" name="viewport">

 

Viewport说明:该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.
user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no
PS:初次尝试制作移动端页面。亲们,由于我没有加上面的viewport声明,结果导致页面狼狈不堪。  

4、加上以下语句可使网页在苹果设备上运行更好

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" />

 

   

 

    3)加入这句话可以定义iphone的添加到主屏幕的图标    <link rel="apple-touch-icon" href="/images/logo.png" />

 

posted @ 2014-12-16 11:29  洒洒  阅读(479)  评论(0编辑  收藏  举报