Interesting HTML Headers
HTML中，
中的标签多用于页面控制，如编码、缓存等，这里整理了几个比较有意思的标签。X-UA-Compatible
(1) IE
这个标签都比较熟悉了，用于设置当前文档的渲染模式。通过文档兼容模式设定，你可以指定IE解析和呈现页面的方式。
常见的用法如：
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
- IE9、IE8、IE7、IE5：遵循指定版本IE的方式，来渲染页面。
- EmulateIE9、EmulateIE8、EmulateIE7：和上一条不同的是，会遵从指定的文档模式。
- Edge：按照当前IE能支持的最高版本来渲染内容。
(2) Chrome
Google Chrome浏览器也支持了X-UA-Compatible属性，先来说下背景。
GCF(Google Chrome Frame)是一款能让IE使用Chrome内核来渲染网页的插件。安装好GCF后，不是默认执行的，需要通过修改注册表、在地址栏显式的加上gcf:前缀等方式来启用此插件。当这些都是在用户侧主动操作的。
GCF借鉴了IE的方式，允许网站提供方通过X-UA-Compatible来开启Google Chrome Frame插件，如下：
<meta http-equiv=”X-UA-Compatible” content=”chrome=1″ />
当用户使用安装了GCF的IE浏览器，浏览此页面时，会使用GCF来渲染页面。
在chrome中，X-UA-Compatible允许的取值为：
- 1：只要装有GCF就采用
- IE6：仅当IE6时采用GCF
- IE7、IE8：当前版本或更低版本时采用GCF
另外，GCF还可以通过修改服务器的配置，在HTTP Header中增加一个输出项来指定，如：
X-UA-Compatible: chrome=1
(3) IE/GCF 合体
神奇的合体语句如下：
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>
意即当用户使用IE浏览器打开此网页时，如果已经安装了GCF时，会优先开启GCF模式渲染网页；否则按照Edge（当前IE支持的最高版本）方式来渲染网页。
Viewport
这是针对移动设备而设的一个属性。
移动设备的屏幕尺寸，对于页面展现是个硬伤，尤其是初衷为PC而设计的页面。使用viewport可以解决这个问题。如iPhone可视区域为480 x 208px，viewport可以设置比这个尺寸大，也可以比其小。用户通过手指捏合手势，来改变页面的放大、缩小。
下面是safari官网的三张图，演示了一张320 x 356px的图片在viewport控制下的默认展现：
viewport可设置的值：
- width：可设具体的像素值的宽度，如720。device-width是个特殊值，代表当前屏幕的宽度
- height：高度，同上类似
- initial-scale：初始的展示系数
- minimum-scale：可缩小的最小系数
- maximum-scale：可放大的最大系数。当minimum-scale或initial-scale值为1.0，且maximum-scale值为1.0时，页面不可进行缩放
- user-scalable：值为no时，禁止用户缩放页面
当然，实际上viewport的这些值都是有范围的，不是可以设置无限大或无限小的。
使用示例：
<meta name=”viewport” content=”width=200, initial-scale=2.0″>
禁止用户缩放：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
目前支持(或支持部分)viewport属性的浏览器有：
这里有一堆正在和已经草案的meta属性和值：http://wiki.whatwg.org/wiki/MetaExtensions
DNS-Prefetch
当访问一个网页时，DNS用于将一个域名解析到对应的IP地址上。一般的，在DNS本地缓存时，几毫秒就可以读到；但如果获取不到，可能花费数秒钟来取得域名的解析。
DNS prefetching会在用户开始访问某个链接前，尝试去获取DNS的解析，这对于一个应用多个域名下资源的网页有一定的实际意义。
示例：
<link rel=”dns-prefetch” href=”http://qzs.impng.com” />
<link rel=”dns-prefetch” href=”//p1.impng.com” />
<link rel=”dns-prefetch” href=”//p2.impng.com” />
<link rel=”dns-prefetch” href=”//p4.impng.com” />
获得此支持的浏览器有：
IE9的示例：
<link rel=”prefetch” href=”http://img.impng.com” />
Chrome下查看DNS的活跃情况：
- chrome://dns
- chrome://histograms/DNS
- chrome://histograms/DNS.Prefetch
apple-touch-icon
都知道，favicon.ico可设置在浏览器的标题（tab）、地址栏、收藏夹展示一个小图标。
在Apple的移动设备中，当收藏某个页面链接到桌面时，可以显示特定的图标。
各设备对应的代码示例：
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />
如果没有设置size值，则默认为57×57。
这样设置后，当保存一个链接到桌面时，会产生一个像普通APP一样的icon效果；当然，如果不想要默认的高光效果，可以将apple-touch-icon换为apple-touch-icon-precomposed。
IE msApplication
PC和平板系统于一身的windows 8，也提供了一种方便的切换Web页面和APP的方式。
示例代码：
<meta name=”msApplication-ID” content=”microsoft.build.App” />
<meta name=”msApplication-PackageFamilyName” content=”microsoft.build_8wekyb3d8bbwe” />
当用户浏览此站点时，地址栏上会出现一个APP的icon，触碰会可以选择安装此APP（未安装时）或切换到此APP（已安装时）。
