标签：
首先说一下 meta标签的结构，分为两大部分，HTTP标题信息（http-equiv）和页面描述信息（name）。
下面讲一些例子
1、http-equiv属性的值是Content-Type（显示字符集的设置）
注解：设置使用的字符集，说明主页编写使用的文字语言，浏览器会根据设置的字符集来显示内容
用法：
1 <meat http-equiv="Content-Type" content="text/html; charset=utf-8"/>
2、name属性的值是viewport（移动屏幕的缩放）
注解：移动屏幕的viewport也就是移动端当前页面的可视区域，对于桌面浏览器的viewport就是指除了所有工具栏、状态栏、滚动条等之后看到的网页区域。因为移动设备屏幕宽度不同于传统宽度，所以我们需要改变viewport的值。
对于可操作可视区域的属性有：
width // viewport的宽度（范围从200到10,000，默认为980像素）
height //viewport的高度（范围从223到10,000）
initial-scale //初始的缩放比例（范围从>0到10）
minimum-scale //允许用户缩放到的最小比例
maximum-scale //允许用户缩放到的最大比例
user-scalable //用户是否可以手动缩放（no，yes）
1 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
说明：强制让文档与设备的宽度保持1比1；文档最大的宽度比例是1.0(initial-scale初始值和maximum-scale最大值)；user-scalable定义用户是否可以手动缩放（no为不缩放），使页面固定大小。
注意：对各移动设备测试时，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的box也随之放大，导致页面出现错乱问题，解决方法：定义最小宽度
1 body{ 2 min-width : 320px; 3 }
3、 name属性的 format-detection值（忽略页面的数字作为电话号码）
<meta name="format-detection" content="telephone=no" />
注解：使设备浏览网页时对数字不再启用电话功能（iTouch点击数字为存入联系人，iPhone为拨打电话）；若需要启用电话功能将telephone=yes即可。
4、name属性的apple-mobile-web-app-capable值（网站开启对web app 程序的支持）
<meta name="apple-mobile-web-app-capable" content="yes"/>
说明：网站开启对web app程序的支持；该meta可以看出内容为“评估设备的web应用程序xx”，就是说该meta是专门定义web应用的。
5、name属性的apple-mobile-web-app-status-bar-style值（改变顶部状态条的颜色）
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明：在web app 应用下状态条（屏幕顶部条）的颜色；默认值为defualt（白色），可以定位black（黑色）和black-translucent（灰色半透明）；
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面20px高度，iphone4和itouch4的retina屏幕为40px）。
6、name属性设置作者姓名及联系方式
<meta name="author" contect="lixin,mynameislxmax@outlook.com" />
标签：
原文地址：http://www.cnblogs.com/GetAlert/p/5046465.html
