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

<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浏览器内核，而且支持IE6、7、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的宽度就是屏幕的宽度）的目的

转载于:https://my.oschina.net/dang4/blog/758270