一般移动设备的浏览器都默认设置了一个 viewport ，并初始定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。下面我们来认识几个与 viewport 相关的名词：
layout viewport（布局视口）
布局视口是页面布局的实际宽度。iOS, Android基本都将这个视口初始设置为 980px。
- 网页缩放比例（initial-scale）
CSS像素与设备逻辑像素的比例即为网页的缩放比例。如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。在ios下会根据当前设备自动计算缩放比例，使布局视口在缩放后刚好布置在视觉视口中，不会出现滚动条。
visual viewport（视觉视口）－物理像素
视觉视口是移动设备物理屏幕的可视区域，是屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。
ideal viewport（理想视口）－ dip（设备逻辑像素）
理想视口通常是我们说的屏幕显示的实际分辨率，设备逻辑像素的值就是理想视口的值。一个设备逻辑像素在任意像素密度的设备屏幕上都占据相同的空间（设备逻辑像素跟设备的硬件像素无关）。我们可以通过设置viewport标签让理想视口占满视觉视口。
设置方式：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
参考：
“HTML5移动端开发中的Viewport标签及相关CSS用法解析” http://www.jb51.net/html5/451267.html
“移动前端开发之viewport的深入理解” http://www.cnblogs.com/2050/p/3877280.html