viewport理解

两个viewport

layout viewport 和 visual viewport
George Cummins在stack overflow上解释了基本的概念：
将layout viewport想象为一个不会改变大小或形状的大图像。现在想象你有一个较小的框架，通过它你可以看到这个大图片。小框架由不透明的材料构成，通过它你只能看到大图像的一部分，这一部分就叫做 visual viewport .你可以拿着这个框架和图像拉开一定的距离(zoom out)看到整个图像，你也可以让自己离图像更近(zoom in)看到其中的一部分。你也可以旋转这个框架的方向，但是这个图片(layout viewport)的大小和形状永远不会改变。

visual viewport 是当前显示在屏幕上的页面的一部分。用户可以滚动以更改他看到的页面部分，或者缩放以更改可视视区的大小。

然而css布局尤其是百分比宽度，是相对于layout viewport的宽度计算的，它要比visual viewport 宽得多。

因此，html的宽度是由layout viewport的初始宽度决定的，而您的CSS则被解释为屏幕比移动端宽得多。这样可以确保网站的布局与桌面浏览器上的布局一样

layout viewport有多宽呢？不同的浏览器都不相同。Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

缩放

这两个viewport都是由css像素所测量的，但是visual viewport的尺寸会随着缩放变化(如果你zoom in屏幕上的css尺寸会减少)，layout viewport的尺寸保持不变(如果不是这样的话，你的页面将会不断回流，百分比宽度会重新计算)

理解layout viewport

为了了解布局视区的大小，我们必须查看页面完全缩小时会发生什么。许多移动浏览器最初在完全缩小模式下显示整个页面。

重点是：浏览器已经选择了layout viewport 的尺寸，这样它就可以在完全缩小模式下完全覆盖屏幕（因此等于visual viewport）

因此，layout viewport的宽度和高度等于在最大缩小模式下屏幕上显示内容的宽高。当用户放大缩小时，layout viewport的尺寸保持不变。

布局视区宽度始终相同。如果您旋转手机，可视视区会发生变化，但浏览器会稍微放大，使布局视区再次与可视视区一样宽，从而适应新的方向。

这会影响布局视区的高度，该高度现在大大低于纵向模式。但是Web开发人员不关心高度，只关心宽度。

测量layout viewport

现在我们有两个viewport想要去测量，非常幸运浏览器大战给力我们两个属性。
document.documentElement.clientWidth 和 document.documentElement.clientHeight 描述了layout viewport的尺寸。

方向旋转之后layout viewport的尺寸只会在高度上改变，宽度不会变

测量visual viewport

window.innerWidth 和 window.innerHeight 描述了visual viewport的尺寸。当zoom in 或者 zoom out 发生时，visual viewport的尺寸会发生变化，屏幕上显示的css px 会增多或减少。

不幸的是这是一个不兼容的领域，许多浏览器仍然需要添加对可视视区测量的支持。尽管如此浏览器也没有其他属性来测量visual viewport，因此我猜window.innerwidth/height是一个标准，尽管它兼容性差

The screen

在桌面端 screen.width/height用设备像素给出了屏幕尺寸，作为一个web开发者，你永远不会需要这个信息，你不需要知道屏幕的物理像素，只需要知道上面有多少个css像素。