HTML5 meta详解

meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 用于指定双核浏览器默认以何种方式渲染页面 -->
	<meta name="renderer" content="webkit"> 
    <!-- 为移动设备添加 viewport；-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 忽略页面中的数字识别为电话，忽略email识别，忽略地址识别 -->
    <meta name="format-detection" content="telphone=no, email=no, address=no"/>
    <!-- 指定请求和响应遵循的缓存机制 -->
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<!-- 用于设定网页的到期时间，content="0"表示每次打开网页都需要从服务器上重新加载网页内容 -->
	<meta http-equiv="expires" content="0">
	
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <!-- iOS 设备 end -->
    
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

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

为移动设备添加 viewport； width=device-width：强制让文档的宽度与设备的宽度保持1:1；initial-sacle：初始的缩放比列；minimum-scale：允许用户缩放的最小比列；maximum-scale：允许用户缩放的最大比列；user-scalable：用户是否可以手动缩放(no/yes)。
一般设置了不允许缩放：user-scalable=no，就没必要设置最大最小缩放了。

<meta http-equiv="pragma" content="no-cache">

禁止浏览器从本地缓存中调阅页面内容，设定后一旦离开网页就无法从cache中再调出

<meta http-equiv="expires" content="0">

用于设定网页的到期时间，过期后网页必须到服务器上重新获取。如果设置content=“0"或content=”-1"，则表示网页在本地缓存0秒后就过期了，也就是说，每次打开网页都需要从服务器上重新加载网页内容，才能在浏览器中显示内容！

<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->

html5shiv让浏览器可以识别html5的新标签；
respond让低版本浏览器可以使用CSS3的媒体查询。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
no-cache：指示请求或响应消息不能缓存。
no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。

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

这样写可以达到的效果是如果安装了GCF（Google Chrome Frame 谷歌内嵌浏览器框架的简称），则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

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

禁止将数字变成电话号码，IOS和Android系统都会默认某长度内的数字为电话号码

参考
HTML meta标签总结与属性使用介绍
移动终端H5页面meta标签的设置案例
适应移动端