视口（viewport）
视口（viewport）指的是当前计算机可见的图形区域。在web浏览器中指的是浏览器的窗口，但是不包含浏览器的UI，菜单栏等区域。
在移动端视口通常分为三种：布局视口，可视视口，理想视口。这也是移动端适配的主要要知道的部分。
布局视口
布局视口（layout viewport）: 指的就是上图中的区域，简单来说当一个元素位于顶层时，height:100% 指的就是布局视口的宽度。
在pc 浏览器中指的是浏览器的窗口，但不包括padding，border ，滚动条等区域，仅仅包含 content 区域。
在移动端，布局视口一般会给与 980px，这个尺寸可以保证pc页面在移动设备上正常显示，但是页面整体显示的非常小，用户可以通过放缩来查看。
可以通过调用document.documentElement.clientWidth / clientHeight来获取布局视口大小。
视觉视口
视觉窗口(visual viewport): 这个概念很好理解，指的就是用户可见的区域，也就是移动设备的浏览器窗口可视区域。
需要注意的是，当用户进行缩放时，改变的不是布局窗口而是视觉视口。如：当用户缩放 150% 时，这时的 css像素会方大，导致可视窗口可见内容变少，相当于视觉视口变小了。
我们可以通过调用window.innerWidth / innerHeight来获取视觉视口大小。
理想窗口
由于布局窗口在移动端的展示效果不尽如人意，理想视口（ideal viewport）就诞生了：它指的是移动设备上理想的页面展示。
如上图，在浏览器中调试时展示就是理想视口，它的单位就是设备独立像素。
在介绍设备独立像素是提到，页面缩放比 = css像素/设备独立像素，同时 页面缩放比还可以通过后面的公式计算 页面缩放比=理想视口/可视视口。所以，当页面是缩放比为100% 时，就可以推断出 css像素=设备独立像素，理想视口=可视视口。
可以通过调用screen.width / height来获取理想视口大小。
Meta viewport
以上介绍的三种视口，理想视口是最好的窗口，因为他是布局最好的窗口，因此，如果能让 视觉窗口 和 布局视口 都和 理想视口 大小一致，在布局和展示方面就会得到想要的效果。
Meta viewport 可以通过设置，将这三者的尺寸给统一起来。下面是一个示例：
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
上例中各个属性的含义如下表：
| value | 可能值 | 描述 |
|---|---|---|
| width | 正整数/device-width |
以 px 为单位定义布局视口的宽度 |
| height | 正整数/device-height |
以 px 为单位定义布局视口的高度 |
| initial-scale | 0.0-10.0 |
定义页面初始缩放比例 |
| maximum-scale | 0.0-10.0 |
定义页面最大缩放比，其值必须大于等于minimum-scale |
| minimum-scale | 0.0-10.0 |
定义页面最大缩放比，其值必须小于等于maximum-scale |
| user-scaleable | yes/no |
是否允许用户缩放页面 |
移动端适配
通过上面的分析可以看出，让 布局视口 和 可视视口 越接近 理想视口 越好。这时，将 width 设置为 device-width 就表示将 布局视口 的宽度设置为设备宽度，也就是 理想视口 宽度，这就是我们想要的。
下面是 initial-scale=1 ，因为 页面缩放比=理想视口/可视视口，而 initial-scale 是初始化时的 页面缩放比，为 1 就表明 理想视口===可视视口。
至此，三个视口在尺寸上已经近似，1pxcss像素===1px设备独立像素，这样子就可以实现在不同的设备上展示出相似的页面。
关于缩放
上面提到width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是width和视觉视口宽度的最大值。
例如：若手机的理想视口宽度为400px，设置width=device-width，initial-scale=2，此时视觉视口宽度 = 理想视口宽度 / initial-scale即200px，布局视口取两者最大值即device-width 400px。
若设置width=device-width，initial-scale=0.5，此时视觉视口宽度 = 理想视口宽度 / initial-scale即800px，布局视口取两者最大值即800px。
总结
移动端布局首先要通过 meta viewport 设置去统一三个窗口的尺寸，使他们的尺寸尽量接近，这样才能实现更好地适配。另外需要注意width 和 initial-scale 对 布局窗口 的 width 取值的影响。把握好这些，就离更加完美的移动端适配迈进了一步。
