visual viewport和layout viewport

首先了解几个概念:

• 物理像素：买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度.

• CSS像素：就是CSS里的Px，上面已经讲了是viewport中的一个小方格。

• 像素密度：即dpi或ppi，屏幕每英寸所占的物理像素点。

像素密度如何去计算请戳我

本文主要是说明layout viewport和visual viewport两者的区别和在移动端上得表现。

当你在写移动端页面的时候，经常会看到这样一个元素信息

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

其中name属性声明了这个meta标签元素想要声明的内容的名称,content就是声明的具体内容了。

这也是这篇文章想要探讨的一些问题。

不管你是用PC端还是移动端的浏览器去访问一个页面的时候。你所看到的浏览器的窗口就是你visual viewport（通过window.innerWidth/height获取），对于移动端来说，就是你通过浏览器所看到的那部分大小，它的度量单位是px(css中的像素)。这个visual viewport通常是可以变化的，例如你对屏幕进行缩放，这样就可以改变visual viewport的大小，或者你移动屏幕的滚轮，这样就可以改变visual viewport的位置。

和visual viewport相对应的另外一个viewport叫layout viewport。它就相当于一个大的box，所有的内容都要在这个box里面显示。你通过visual viewport所看到的内容就是layout viewport上的部分内容。

visual viewport和layout viewport到底又有什么区别和联系呢?

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

当你进行页面缩放的时，你可以想象你拿着这个小框架离这张大图越来越近了，那么你所看到的大图的内容也越来越少了。原本在未缩放的页面上看起来很小的尺寸，现在通过viewport看上去变大了，事实上这部分的css的px值并没有变化，仅仅是因为进行放大后，css的1px的值所占的屏幕分辨率的值变大了。

同理，当你缩小整个页面的时候，看到大图的内容也越来越多，同时，原本看起来很大的尺寸，现在再通过viewport看上去的时候又变小了。同理,css的1px的值并没有发生变化,但是1px值所占的屏幕分辨率的值变小了。

在放大和缩小的过程中，visual viewport和layout viewport的宽，高都没发生任何的变化,变化的仅仅就像是用户拿着这个visual viewport去远离或者靠近layout viewport，在远离或者靠近的过程中，就会呈现出缩放的效果来。

那么layout viewport到底有多宽呢？

初始状态：

例如chrome下，初始layout viewport的宽度是980px，这个时候整个页面是处于完全缩小的状态下，通过visual viewport是可以看到layout viewport中的所有内容的，就好像你拿着visual viewport，离layout viewport到正好可以看到layout viewport所有内容的距离为止。

即在初始状态下,没有设置<meta name="viewport">的情况下，layout viewport依据不同浏览器的特性，有一个初始值，并处于完全缩小的状态。例如 12306官网

声明了< meta name="viewport">的状态下：

当通过meta标签申明了viewport的宽度

    <meta name="viewport" content="width=300">

layout viewport初始化的宽度就是300px,并处于完全适应于visual viewport的状态。即通过visual viewport可以看到layout viewport中所有的内容(不存在滚轮的情况下)。

当你拿着手机屏幕进行翻转的时候：

• 如果visual viewport 的宽度 > layout viewport 的宽度，那么viewport需要zoom in,以适应visual viewport的宽度

• 如果visual viewport 的宽度 < layout viewport的宽度，那么viewport需要zoom out，以适应visual viewport的宽度

    <meta name="viewport" content="width:device-width">

device-width会将手机横向物理像素/转化系统(具体的换算见请戳我)作为其值，并重置相应的layout viewport的值，并适应visual viewport。

此时，不管手机屏幕是否翻转时，visual viewport 都和 layout viewport的值相同。而不会出现缩放的情况。不过用户是可以通过进行缩放操作的。

如果设置

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

此时用户不能对网页进行缩放。

参考文章：

• 两个viewport的故事

• 移动适配(二)

• 移动适配(一)

• 深入了解viewport和px

• 在移动浏览器中使用viewport元标签控制布局

• Safari Web Content Guide