HTML5中meta属性的应用

<meta  name="属性名"  content="属性内容" >

1.viewport

移动端浏览器通常在一个比屏幕更宽的虚拟“窗口”（视口）中渲染页面，从而无需将所有页面都压缩进小屏幕里（如果把所有页面都压缩进手机的小屏幕里，很多没有针对移动端设计的网站就会被打乱），用户可以通过平移和缩放来浏览页面的不同区域。

iOS Safari最初引入“viewport”元标签来让开发者控制可视窗口的尺寸及比例。现在的移动端浏览器基本都支持这个标签。

一个典型的针对移动端优化的viewport包括下面内容：

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

属性说明：

width : 控制viewport大小，单位是px，可以指定一个数值或常量（device-width是一个常量，表示设备屏幕的宽度）；

height : 和width对应，常量为“device-height”

initial-scale：初始缩放比例，一般设为1

maximum-scale：允许用户缩放到的最大比例

minimum-scale：允许用户缩放到的最小比例

user-scalable：用户是否可以手工缩放，一般设为no不允许用户手工缩放。

参考：

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

2. format-detection属性,格式检测

<meta  name="format-detection"  content="telephone=no" >

在iPhone中，如果你写了一串普通数字（自己并没有加link样式），iPhone会自动把这个数字加上链接样式，点击这个数字还会自动拨号。telephone=no就禁止把数字转化为拨号链接，telephone=yes就开启了把数字转化为拨号链接，默认情况下是开启的。

<meta  name="format-detection"  content="email=no" >

告诉设备不识别邮箱地址，点击之后不自动发送。

email=no，禁止识别邮箱地址

<meta  name="format-detection"  content="address=no" >

禁止网页跳转地图（没用过还）

3.apple-mobile-web-app-capable属性，iPhone私有属性，全屏模式浏览

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。

4.apple-mobile-web-app-status-bar-style，iPhone私有，屏幕顶部状态栏样式。

如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。

  未完待续....