移动端适配之二：visual viewport、layout viewport和ideal viewport介绍

上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍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页面渲染的盒子的尺寸，从而达到最佳的显示效果。

来源：http://www.javashuo.com/article/p-nhfxentw-mh.html