细数meta标签的奥秘

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

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

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">

2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

4. <meta name="apple-mobile-web-app-status-bar-style" content="black">

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

6. <meta http-equiv="Expires" content="-1">

7. <meta http-equiv="Cache-Control" content="no-cache">

8. <meta http-equiv="Pragma" content="no-cache">

9. <meta name="full-screen" content="yes">

10.<meta name="browsermode" content="application">

11.<meta name="x5-fullscreen" content="true">

12.<meta name="x5-page-mode" content="app">

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

14.<meta name="author" content="m.xx.com">

15.<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

16.<meta name="renderer" content="webkit">

---

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">

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

2.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

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

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

同时,与之想像还有这么一句<meta http-equiv="Content-Type" Content="text/html",Charset=gb2312">
该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.<meta name="apple-mobile-web-app-capable" content="yes">

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

4.<meta name="apple-mobile-web-app-status-bar-style" content="black">

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

content="black"是酱紫的

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

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. <meta http-equiv="Expires" content="-1">

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

7. <meta http-equiv="Cache-Control" content="no-cache">

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消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

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

<meta http-equiv="cache-control" content="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. <meta http-equiv="Pragma" content="no-cache">

Pragma(cache模式)

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

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

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

9. <meta name="full-screen" content="yes">

强制UC浏览器全屏

10.<meta name="browsermode" content="application">

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

11.<meta name="x5-fullscreen" content="true">

 强制QQ浏览器全屏
 

12.<meta name="x5-page-mode" content="app">

进入QQ应用模式

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

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

14.<meta name="author" content="m.xx.com">

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

15.<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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.<meta name="renderer" content="webkit">

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