标签在移动端的应用

<meta>标签在移动端的应用

---

1. x-ua-compatible的使用

1.1 IE黑历史

为对以前开发的网页进行支持，IE6容许网页开发人员选择IE编译和显示网页的方式。
经过设置恰当的<!DOCTYPE>, 开发人员能够设置IE的"Quirks Mode"或者"Standards Mode"。
IE8引入了文件兼容性的概念,使用户可以选择特定的IE版本编译和显示网页。

1.2 IE的文件兼容性模式

• Emulate IE8 mode, 指示IE使用<!DOCTYPE>指令来决定如何编译内容, Standards Mode使用IE8 Standards Mode, Quirks Mode使用IE5 Quirks Mode

• Emulate IE7 mode, 指示IE使用<!DOCTYPE>指令来决定如何编译内容, Standards Mode使用IE87 Standards Mode, Quirks Mode使用IE5 Quirks Mode

• IE5 mode, 编译内容如同IE7的quirks mode之显示情况，和IE5中显示的很是相似。

• IE7 mode, 编译内容如同IE7的standards mode之显示情况，不管网页是否含有<!DOCTYPE>指令。

• IE8 mode, 支持CSS2.1, Selectors API并支持部分CSS3的功能

• Edge mode, 指示IE以目前可用的最高模式显示内容

1.3 使用meta标签指定文件兼容性模式

• x-ua-compatible头标签没有大小写之分。可是除 title 和其余的meta标签以外，它必须在<header>其余元素前使用

• IE只会使用第一个x-ua-compatible头

• 指定IE浏览器文档模式

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
 <meta http-equiv="x-ua-compatible" content="IE=9" >
 <meta http-equiv="x-ua-compatible" content="IE=8" >
 <meta http-equiv="x-ua-compatible" content="IE=7" >
 <meta http-equiv="x-ua-compatible" content="IE=edge" >

• 多个模式的指定
  若是一个特定版本的IE支持所要求的兼容性模式多于一种，将采用列于标头内容属性中最高的可用模式。你能够使用这个特性来排除特定的兼容性模式，虽然并不推荐这样作。举例来讲，下列标头即会排除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

1.4 使用Google Chrome Frame渲染

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

若是安装了GCF，则使用GCF来渲染页面，若是没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可让用户的IE浏览器外观不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，并且支持IE六、七、8等多个版本的IE浏览器。

2. meta viewport标签的使用

2.1 meta viewport标签能够使用的属性

meta viewport标签首先是由苹果公司在其safari浏览器中引入的，目的是解决移动设备的viewport问题。后来安卓和各大厂商也纷纷效仿，引入了对meta viewport的支持。
在苹果的规范中，meta viewport标签有6个属性。

• width 设置layout viewport的宽度, 为一个正整数, 或字符串'device-width'

• initial-scale 设置页面的初始缩放值, 为一个数字, 能够带小数

• maximum-scale 设置容许用户的最大缩放值, 为一个数字, 能够带小数

• minimum-scale 设置容许用户的最小缩放值, 为一个数字, 能够为小数

• height 设置layout viewport的高度

• user-scalable 是否容许用户进行缩放, 值为"no"或者"yes"

这些属性能够同时使用，也能够单独使用或者混用， 多个属性同时使用时用逗号隔开
此外，在安卓中还支持target-densitydpi这个私有属性，它表示目标设备的密度等级，做用时决定css中的1px表明多少物理像素(devicePixelRatio)。

• target-densitydpi 值能够为一个数字或者high-dpi, medium-dpi, low-dpi, device-dpi几个字符串中的一个

当target-densitydpi=device-dpi时，css中的1px等于设备物理像素的1px。

2.2 如何将当前的viewport宽度设置为ideal viewport的宽度

• 将width设置device-width
  因为meta viewport标签中的width能控制layout viewport的宽度，因此将width设置为device-width可以将viewport宽度设置为ideal viewport的宽度

<meta name="viewport" content="width=device-width">

在ipad和iphone上，不管是横屏仍是竖屏，宽度都是竖屏时ideal viewport宽度的值。

• 将initial-scale设置为1.0
  缩放是相对于ideal viewport来缩放的，当缩放值为1时，天然获得ideal viewport的宽度

<meta name="viewport" content="initial-scale=1.0">

在windows phone的IE上，不管是横屏仍是竖屏，宽度都是竖屏时ideal viewport宽度的值

• 同时设置width与initial-scale
  在同时设置width与initial-scale时，浏览器会取其中较大的宽度做为其ideal viewport的宽度

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.3 缩放以及initial-scale的默认值

公式

visual viewport宽度 = ideal viewpot宽度 / 当前缩放值 
当前缩放值 = ideal viewport宽度 / visual viewport宽度

在iphone与ipad上，不管给viewport设置的width是多少，若是没有指定默认的缩放值，那么iphone和ipad或自动给计算这个缩放值，以达到当前页面不会出现横向滚动条（或者说viewport的宽度就是屏幕的宽度）的目的