移动web端之meta应用
2017-04-03 本文已影响68人
Iris_mao
在移动端进行网页开发，首先要弄明白viewport在移动设备中的作用，meta中viewport的作用是让我们的网页更好的适配和响应各种分辨率不同的移动设备。
A. 常用代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
content中属性的作用：
| 属性 | 作用 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
所以上述代码的作用就是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
B. name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）
<meta name="apple-mobile-web-app-capable" content="yes" />
- 网站开启对 web app 程序的支持。
- 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。
C. name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
- 在 web app 应用下状态条（屏幕顶部条）的颜色；
- 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
D. name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）
<meta name="format-detection" content="telephone=no" />
- 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
