共计 1970 个字符，预计需要花费 5 分钟才能阅读完成。
上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍 viewport 相关的内容。
很多博客都会提到 PPK 所讲的三个 viewport，有的讲的比较复杂，看的云里雾里，我这里也大概介绍一下，三个 viewport 主要是相对于移动端而言的。
visual viewport
这个是浏览器给我们用的、能真正用来显示网页内容的区域，可以通过下面的 js 命令获取：
window.innerWidth
window.innerHeight
正如上篇博客所说的，前端里面能获取到的像素基本上都是 CSS 像素，所以这个的单位也是 CSS 像素。对于 iPhone X，浏览器全屏状态下，其 window.innerWidth 的值为 375。
上篇博客中还提到 screen.width 和 screen.height，主要是用来获取整个屏幕的大小的，而 window.innerWidth 和 window.innerHeight 只是获取浏览器可用显示区域的大小，也就是浏览器中间负责显示的部分。当浏览器全屏时，要去掉状态栏、标签栏、任务栏等区域，当浏览器非全屏时，其值更小。由于在移动端，浏览器一般都是全屏的，所以大多数情况下 screen.width 与 window.innerWidth 的值相等，也有的博客中说用 screen.width 和 screen.height 来获取 visual viewport 的大小，就是这个原因。
visual viewport 是我们可以直观看到的，不严谨的说，就是差不多等于手机屏幕的大小，偏向于一个物理概念。
layout viewport
网页最早是出现在电脑上的，上一篇博客中提到，电脑的物理像素可能比手机还要低，但是电脑的设备无关像素（或者说是分辨率吧，更严谨一些）是明显大于手机的设备无关像素的，毕竟电脑的屏幕尺寸远比手机大啊。那些在电脑上的网页，如果没有经过专门的优化，直接搬到手机上看，那么问题就来了，网页会被挤得变形，相信这种问题大家都遇到过。所以呢，手机厂商为了解决这个问题，设置了一个 layout viewport。
这是一个虚拟的窗口，其大小比手机屏幕大，加载网页时，直接把 HTML 渲染在这个虚拟的窗口中，这样就不会样式错乱了。在查看的时候，毕竟手机的 visual viewport 小啊，那就只能通过滚动条来看了。
做个比喻，layout viewport 就是一张大白纸，HTML 的内容就写在这个大白纸上，visual viewport 就是一个放大镜，上下左右移动，可以显示其中的一部分。
Layout viewport 的大小可以通过 document.documentElement.clientWidth 和 document.document.clientHeight，实际使用中可能会有一些兼容问题，这跟 DOCTYPE 声明有关。不同浏览器的 layout viewport 大小不同，常见的有 980px、1024px。
ideal viewport
Layout viewport 是为了能将电脑上的网页正确的显示到手机上。当浏览器拿到一个网页时，首先会渲染到这个 layout viewport 里面。可是现在有很多网页会针对手机做专门的设计，比如现在的一些 H5 活动页，设计的尺寸就是在手机上看的。此时如果还是把网页渲染到这个大的 layout viewport 上，实在是有点不合适了。所以，还应该有个 ideal viewport，这个 ideal viewport 应该与手机屏幕大小的相同，确切来说，等于 visual viewport 的大小。把页面渲染到这个 ideal viewport 里面，就能在 visual viewport 中完美显示。
小结
根据我的理解小结一下：layout viewport 和 ideal viewport 都是用来渲染页面，layout viewport 较大，用来渲染电脑上的页面，ideal viewport 较小，用来渲染专门针对手机设计的页面；而 visual viewport 是用来查看 layout viewport 和 ideal viewport 的，是用来查看渲染的结果的。visual viewport 是很具体的，而 layout viewport 和 ideal viewport 是比较抽象的。某种程度来说，layout viewport 和 ideal viewport 可以理解成是两种尺寸，承载页面渲染的盒子，可以设置成 layout viewport 的尺寸，也可以设置成 ideal viewport 的尺寸，而且在默认情况下是 layout viewport 的尺寸。如果我们设置 HTML 中 body 为 width:100%，那么这个 body 的实际宽度，将由这个盒子的宽度决定。在下一篇博文中，将介绍如何用 meta 标签来设置 viewport，也就是设置这个承载 HTML 页面渲染的盒子的尺寸，从而达到最佳的显示效果。
