细数meta标签的奥秘

摘要：作用是控制状态栏显示样式。在请求消息或响应消息中设置并不会修改另一个消息处理过程中的缓存处理过程。各个消息中的指令含义如下指示响应可被任何缓存区缓存指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。

因为看到了一个很不错的h5自适应网站，觉得很不错，于是好奇心作祟，让我翻开了它的源码一探究竟，
最先研究的是它的meta标签，好了，废话不多说，以下是我总结的和比较实用的meta标签，如有错误，
请多多指教。

先来整个meta标签列表，方便各位赏光，嘻嘻嘻。。。

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

1.

这个做过前端的同学应该很熟悉了，首先定义一个可视化的视口，content里的width,initial-scale,maximum-scale,user-scalable都是它的参数，就像这个就是初始化视口的宽度等于设备的宽度，初始化视口为正常显示，不放大也不缩小；最大的视口也是1:1；不允许用户点击放大或者缩小视口；最后的这个minimal-ui,一直强调人性化设计的苹果为iOS 7.1的Safari准备的，因为在这之前每次打开页面总会显示顶部地址栏和底部导航栏，使得用户每次都要再次点击页面隐藏掉，所以为了用户体验你的网站，可以加上这个呦！！这个标签用于移动端的适配。

2.

http类型:这个网页是表现内容用的

content(内容类型):这个网页的格式是文本的

charset(编码):这个网页的编码是UTF-8,需要注意的是这个是网页内容的编码,而不是文件本身的.编码不用说,content常见的还有xml等类型

同时,与之想像还有这么一句
该META标签定义了HTML页面所使用的字符集为GB2132,就是国标汉字码.如果将其中的"charset=GB2312"换成"BIG5"，则该页面所用的字符集就是繁体中文Big5码.当你浏览一些国外的站点时.IE浏览器会提示你要正确显示该页面需要下载xx语支持.这个功能就是通过读取HTML页面meta标签的Content-Type属性而得知需要使用哪种字符集显示该页面的.如果系统里没有装相应的字符集,则IE就提示下载.其他的语言也对应不同的charset,比如日文的字符集是“iso-2022-jp ”,韩文的是“ks_c_5601”。Content-Type的Content还可以是:text/xml等文档类型；

3.

这个标签的意思是删除苹果手机的工具栏和菜单栏，如果需要显示就不需要加了，因为content默认是no。

4.

“apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式。默认样式是black-translucent酱紫的

content="black"是酱紫的

5.

format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：

meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"

也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"

下面具体说下每个设置的作用：

telephone

你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：

telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！

email

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

email=no禁止作为邮箱地址！
email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！

adress

adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！

6.

Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期。

7.

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指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)

,常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：

1） 打开新窗口 值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。 而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)

2） 在地址栏回车 值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。 值为no-cache，那么每次都会访问。 值为max-age，则在过期之前不会重复访问。

3） 按后退按扭 值为private、must-revalidate、max-age，则不会重访问， 值为no-cache，则每次都重复访问

8.

Pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：＜meta http-equiv="Pragma" content="no-cache"＞

注意：这样设定，访问者将无法脱机浏览

9.

强制UC浏览器全屏

10.

进入UC应用模式 PS:UC进入应用模式后自动全屏

11.

 强制QQ浏览器全屏
 

12.

进入QQ应用模式     

13.

具体作用：禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接,应用于页面数字比较多的场景

14.

网络爬虫robot (Google,百度等搜索引擎)会读取网页中meta项将其作为索引，大家搜索网页时搜索“m.xx.com”时就会搜到这个网页了

15.

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置

这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器，而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。

而上文提到的那个meta标记，则是在是安装了GCF后，用来指定页面使用chrome内核来渲染

16.

最后这个是360给我们带来的不错标签，可以使360浏览器自动切换至急速模式，使得页面兼容性大大的提高，不过其他浏览器暂时还没有统一。