上一篇博文算是对像素的一个清晰的解释。在这篇博文中，我们将继续介绍视口相关的内容。很多博客都会提到PPK提到的三个viewport。其中一些更加复杂和混乱。我也会在这里简单介绍一下。三个视口主要是相对于移动端而言的。visualviewport这是浏览器给我们的，可以实际显示网页内容的区域。可以通过如下js命令获取：window.innerWidthwindow.innerHeight上一篇博客有提到，前端可以获取到的像素点基本都是CSS像素点，所以这个的单位也是CSS像素点.对于iPhoneX，当浏览器处于全屏状态时，window.innerWidth的值为375。之前的博客也提到过screen.width和screen.height主要用于获取整个屏幕的大小，而window.innerWidth和window.innerHeight只是用来获取浏览器可用显示区域的大小，即浏览器中间负责显示的部分。当浏览器全屏时，状态栏、标签栏、任务栏等区域应该被移除。当浏览器不是全屏时，它的值较小。由于浏览器在移动端一般都是全屏的，所以大多数情况下screen.width和window.innerWidth的值是相等的，也有博客说screen.width和screen.height是用来获取screen.width和screen.height的大小的visualviewport，就是这个原因。视觉视口就是我们可以直观看到的东西。说白了就是几乎等于手机屏幕的大小，偏向于一个物理概念。布局视口网页最早出现在电脑上。上一篇博客提到，电脑的物理像素可能比手机低，但是电脑的设备无关像素（或者说分辨率，更严谨一点）是很明显的。比手机大的设备与像素无关。毕竟电脑的屏幕比手机大很多。如果电脑上的那些网页没有经过特别优化，直接在手机上看，那么问题就来了，网页会被挤压变形。相信大家都遇到过这样的问题。所以，为了解决这个问题，手机厂商设置了layoutviewport。这是一个比手机屏幕还大的虚拟窗口。加载网页时，HTML直接渲染在这个虚拟窗口中，这样就不会乱了样式。查看的时候，毕竟手机的视觉视口很小，所以只能通过滚动条来查看。打个比方，布局视口是一张大白纸，上面写着HTML内容，可视视口是放大镜，上下左右移动可以显示其中的一部分。布局视口的大小可以由document.documentElement.clientWidth和document.document.clientHeight决定。实际使用中可能会出现一些兼容性问题，这与DOCTYPE声明有关。不同浏览器的布局视口大小不同，常见的有980px和1024px。理想的viewportLayout视口是在手机端正确显示电脑端的网页。当浏览器获取到网页时，它会首先将其渲染到布局视口中。但是现在有很多专门为手机设计的网页。比如现在的一些H5活动页面，就是为了在手机上查看而设计的。这个时候，如果网页还渲染到这个大布局视口，实在是不合适。因此，应该有一个理想的视口。这个理想的视口应该和手机屏幕一样大。准确的说，等于视觉视口的大小。将页面渲染到这个理想视口中，它将完美地显示在视觉视口中。总结以我的理解：首先，我们可以想象布局视口和理想视口是两个用来渲染页面的盒子，HTML页面在盒子里渲染，视觉视口用来查看渲染结果，相当在一个窗口中。我们将HTML的body设置为width:100%，那么盒子的宽度将与HTML页面一样宽。布局视口是用来在电脑上渲染页面的，所以比较大，而理想视口比较小，用来渲染专门为手机设计的页面。然而，在浏览器的实现中，确实没有那么多盒子。只有一个布局视口框，页面在这个框内渲染。布局视口默认比较大。如果我们想渲染成理想的视口框，只需要调整布局视口的大小即可。如何调整将在下一节介绍。总结一下，layoutviewport是用来承载HTML的渲染的，visualviewport是查看渲染结果的窗口，idealviewport可以理解为一个size，等于visualviewport的大小。调整布局视口的大小，使其在视觉视口的视图下效果最好，这就是我们想要的移动适配。
