<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的宽度就是屏幕的宽度)的目的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。