屏幕适配 – meta视口标签
meta视口标签应该被放在HTML文档的<head>中，并且按以下格式书写:
<meta name="viewport" content="name=value,name=value">
每一个名/值对都是一个给浏览器发号命令的指令。它们被逗号分隔，共有6个：
1. width:设置布局视口的宽度为特定的值
2. initial-scale:设置页面的初始缩放程度和布局视口的宽度
3. minimum-scale:设置了最小缩放程度(用户可缩小的程度)
4. maximum-scale:设置了最大缩放程度(用户可放大的程度)
5. user-scalable:是否阻止用户进行缩放
// 6. height:设置布局视口的高度(未被实现)
width
[1] 不设置宽度
以 iPhone4S 为例，如果不设置viewport，它就会默认是980px，就像把屏幕分成980份。
如果设置一个元素为100px*100px，看起来就是屏幕的100/980。
[2] 把布局视口的尺寸设为一个理想的值
<meta name="viewport" content="width=device-width">
以 iPhone4S 为例，如果设置 viewport width=device-width，它就会是320px，就像把屏幕分成320份。
如果设置一个元素为100px*100px，看起来就是屏幕的100/320 。
[3] 把布局视口的尺寸设为固定宽度
<meta name="viewport" content="width=400">
浏览器支持的最大值是10000个像素，最小值约为理想视口的20%，安卓webkit不允许任何小于布局视口的宽度。
如果你指定了一个这样的值，它会自动转换为默认布局视口，通常是980px。
IE10不允许任何超出480px的值，超出的话会自动转换为布局视口的默认宽度1024px。
initial-scale
initial-scale指令设置了页面的初始缩放程度。1代表100%，2代表200%。缩放程度是根据理想视口来计算的。
当前缩放值 = 理想视口宽度 / 视觉视口宽度 安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才表现正常。 缩放程度与视觉视口的宽度是逆相关的，越高的缩放程度意味着视觉视口越小。 所以initial-scale=1时，视觉视口尺寸和理想视口尺寸是一样的。 initial-scale=2会放大到200%，因此视觉视口的高宽是理想视口的一半。
minimum-scale和maximum-scale
没有这些指令时，浏览器允许用户的缩放级别达到5(20%-500%);有指令，范围可扩大到10(10%到1000%)。
更高的缩放程度不被支持，因此设置maximum-scale=20和设置maximum-scale=10的效果是一样的。
安卓webkit不支持minimum-scale。同样，它的缩放范围是4(25%-400%)，并且不支持改变这个范围。
user-scalable
user-scalable=no 表示禁止缩放