我们在做移动端页面开发时常常会设置一个 name 为 viewport 的 meta 标签，用来控制页面的宽度、缩放比例及是否可缩放等，那么这么做的背后原因是什么呢？今天就来分析一下。
什么是 Viewport
首先看一下 MDN 中对 Viewport 的定义：
A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed
翻译过来就是：视口表示当前正在查看的计算机图形中的多边形（通常为矩形）区域。
那么如果在浏览器里，viewport （视口） 就是表示用来显示网页的区域。 当然网页的实际宽度可能要比浏览器可见区域要大，这一点在移动设备上尤为明显，可能需要滑动网页才能浏览页面的其它部分。
如上图中，分别展示了页面在不同设备上的不同展现状态，在桌面浏览器上，视口宽度等于浏览器宽度，这样看起来并没有什么问题，但是在移动端上，由于设备屏幕过小，如果让视口宽度等于浏览器宽度，页面显示就会特别拥挤，基于这一点，视口分为了布局视口（visual viewport） 和可视视口（layout viewport）。
Chrome 对于 Visual Viewport 的定义可以参考这里：What the Virtual Viewport? | Web | Google Developers
布局视口（Layout Viewport）
对于布局视口，用George Cummins的话说就是：将布局视口想象成一个不会改变大小或形状的大图像。现在，您有一个较小的框架，可以通过该框架查看较大的图像。小框架周围是不透明的材料，遮挡了大图像的一部分。您可以通过框看到的大图像部分是可视视口。您可以在按住框架（缩小）的同时退回大图像，以一次查看整个图像，也可以移近（放大）以仅查看一部分。您也可以更改框架的方向，但是大图像（布局视口）的大小和形状不会改变。
为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px，当然也不一定，这个由设备自己决定，下面是一些设备的默认视口宽度：
这些默认视口宽度，是在不设置 <meta name="viewport" .../> 的情况下的处理，可以通过document.documentElement.clientWidth获取。
可视视口（Visual Viewport）
可视视口就是指我们能够看到的部分，我们可以通过缩放来改变可视视口的大小。
PPK有提到可视视口的宽度可以通过 window.innerWidth 获取，但是实际上并未得到支持。Chrome 61 之后可以用Visual Viewport API获取可视视口宽度，包括缩放比例、页面偏移等，例如：window.visualViewport.width，但其还存在一定兼容性问题：
另外，当我们缩放时，实际上只有可视视口的尺寸在发生变化，而布局视口是不变的。比如进行放大操作时，布局视口宽度始终没有变化，只有可视视口的宽度在变小：
注意：页面的缩放不会导致 CSS 布局被重新计算（回流）
元视口（Meta Viewport）
即在 html 头部添加 meta 标签，例如：
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
这种设置方式最初是由 Apple 提出的，后来被更多的浏览器采用。
width=device-width 意味着设置布局视口的宽度为理想视口宽度， 这个理想视口宽度跟设备相关，例如我们做移动端页面开发常常以 iPhone6/7/8 的宽度为基准，而 iPhone6 的理想视口宽度就是 375。
理想视口的宽度可以通过
window.screen.width获取
同样 initial-scale=1.0 使页面初始缩放比例为 1，也是为了保证布局视口宽度等于理想视口宽度，因为单独使用 width=device-width 会有些兼容问题：
另外 meta viewport 还有更多的属性，其全部属性如下表格所示：
| 属性 | 描述 |
|---|---|
| width | 用来设置布局视口的宽度 |
| initial-scale | 设置页面的初始缩放比例 |
| minimum-scale | 设置页面的最小缩放程度 |
| maximum-scale | 设置页面的最大缩放程度 |
| userscale-able | 是否支持缩放 |
当然设置 meta viewport 是为了做响应式布局，让页面体验更好，如果页面没有做响应式设计，仅仅设置 viewport 可能也没什么意义。
总结
- Viewport 表示用来显示网页的区域
- Viewport 细分为布局视口（
Layout Viewport） 和可视视口（Visual Viewport） - 可以通过
Meta Viewport设置布局视口的宽度，以达到一个理想状态 - Chrome 61 之后可以用Visual Viewport API获取可视视口的属性
相关参考
- Viewport - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
- A tale of two viewports — part one
- A tale of two viewports — part two
- Meta viewport
- Browser compatibility — viewports
- Viewport visualisation app ALPHA
- What the Virtual Viewport? | Web | Google Developers
- Introducing visualViewport | Web | Google Developers
- Visual Viewport API
