meta标签定义

meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="email=no" />

1、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
显示字符集的设定，设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。

2、<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 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:1 ；
文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，
解决方法：定义页面的最小宽度
body {
    min-width: 320px;
}

3、<meta name="format-detection" content="telephone=no">
忽略页面中的数字识别为电话号码

4、<meta http-equiv="Pragma" content="no-cache">
清除浏览器中的缓存，它和以下几句（5、6）合起来用

5、<meta http-equiv="Cache-Control" content="no-cache">
Cache-Control头域
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
各个消息中的指令含义如下
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应，<meta http-equiv="Cache-Control" content="max-age=0" />
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

6、<meta http-equiv="Expires" content="0">
就可以使你再次进入曾经访问过的页面时，ie浏览器必须从服务端下载最新的内容，达到刷新的效果。

<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">
用于设定网页的到期时间，过期则必须到服务器上重新调用

<meta http-equiv="Expires" content="-1">
content="-1"，网页在任何时候都不能被Cache存储

7、<meta name="apple-touch-fullscreen" content="yes" />
添加到主屏幕“后，全屏显示

8、<meta name="apple-mobile-web-app-capable" content="yes">
网站开启对 web app 程序的支持
如果内容设置为YES，Web应用程序运行在全屏模式;否则，它不会。默认行为是使用Safari浏览器显示网页内容

9、<meta name="apple-mobile-web-app-status-bar-style" content="black">
在 web app 应用下状态条（屏幕顶部条）的颜色；
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。

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

忽略android平台中对邮箱地址的识