一、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" />