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