关于移动WebApp 的 meta 标签

这几天做移动端的一个小项目，第一次做还后很多不熟悉的地方，在这先总结一下webApp的meta标签。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

这个主要是设置页面在设备上的表现效果，设置视口（viewport）的宽度和初始缩放比例等。在这里视口viewport指的就是除去所有工具栏、状态栏、滚动条等之后的我们看到的网页。

1. width.height属性设置视口的宽度和高度，可以设置为具体的值，也可以用device-width,和device-height来读取设备的宽高。

2. initial-scale是设置初始缩放比例，一般设置为1.0。

3. minimun-scale和maximun-scale设置最大和最小缩放比例，一般也设置为1.0。

4. user-scalable设置用户是否可以缩放页面。

   这些属性如果没有设置就会采用默认的。比如说如果只设置了width属性，根据设置，会自动计算出height属性。
   这里设置为设备的宽度，缩放比例为1，且禁止用户缩放页面

<meta name="apple-mobile-web-app-capable" content="yes" />

设置Web应用是否以全屏模式运行

改属性只有在设置了全屏样式才能用。默认值为default。

页面显示在状态栏的下方
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />

页面显示在状态栏的下方
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

状态栏显示为黑色半透明，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）

<meta name="format-detection" content="telephone=yes"/>

禁止把数字转化为拨号连接，iphone会将页面中的一串数字转换为电话号码，点击就会自动拨号，这个属性可以将改功能设置为禁用。