A tale of two viewports

终于能看到中文版的PPK大牛写的viewport故事了，感谢翻译的作者。看完之后，之前需要混乱的概念也逐渐清晰了，以下记录一些要点，以备不时翻看，详情内容请移步原文和译文网址拜读。

A tale of two viewports — part one
原文：http://www.quirksmode.org/mobile/viewports.html
译文：http://weizhifeng.net/viewports.html

A tale of two viewports — part two
原文：http://www.quirksmode.org/mobile/viewports2.html
译文：http://weizhifeng.net/viewports2.html

以下为本人摘录和自己理解的内容(其中摘录部分均来自上述两篇译文中)

---

以下知识点是关于桌面浏览器的

---

Device pixels and CSS pixels(设备像素和CSS像素)

设备像素

       指设备的分辨率,其值可以（通常情况下）从screen.width/height属性中读出.

       同一个设备的设备像素固定不变(即数字大小不变，每设备像素代表的长度也不变)

       开发者可以忽略这个值。

CSS像素

       同一个设备的CSS像素数字大小不变，但每CSS像素代表的长度会变，即CSS像素会伸缩。

       CSS像素就是样式表里控制元素如何被渲染的像素。

Zoom (缩放)

现代浏览器中实现缩放的方式都是「拉伸」像素：即每像素单位代表的长度发生变化，而像素总数字不变。

100%缩放：

在缩放比例100%的情况下一个CSS像素完全等于一个设备像素

       所以，如果在一个分辨率为320px*580px的设备上，将一个宽128px的元素被用户放大到200%，那么：
       a、设备像素没变，还是设备的分辨率320px*580px;
       b、这个元素的CSS像素的数字没变，还是128px，但每CSS像素代表的长度变为原来的2倍，即这个元素占据了256个设备像素的空间;
        c、缩放改变的是每CSS像素单位代表的长度，而设备像素保持不变

viewport

viewport的功能是用来约束你网站中最顶级包含块元素即html标签。

因为在理论上，html标签的宽度是被viewport的宽度所限制的。html标签元素使用viewport宽度的100%,而viewport的宽度等于浏览器窗口宽度。

viewport不是一个HTML结构，所以你不能用CSS来改变它。它在桌面环境下只是拥有浏览器窗口的宽度和高度。在移动环境下它会有一些复杂。

viewport的尺寸总可以通过document.documentElement.clientWidth和-Height得到。

html标签本身的尺寸总可以通过document.documentElement.offsetWidth和-Height得到

媒体查询

原理很简单：你可以声明「只在页面宽度大于，等于或者小于一个特定尺寸的时候才会被执行」的特殊的CSS规则。

width/height使用和documentElement .clientWidth/Height（换句话说就是viewport宽高）一样的值。它是工作在CSS像素下的。
device-width/device-height使用和screen.width/height（换句话说就是屏幕的宽高）一样的值。它工作在设备像素下面。

使用哪个？当然是width。Web开发者对设备宽度不感兴趣，这个是浏览器窗口的宽度。

在桌面环境下去使用width而去忘记device-width吧。

---

以下知识点是关于移动浏览器的

---

两个viewport

visual viewport和layout viewport的形象定义：

George Cummins在Stack Overflow上对基本概念给出了最佳解释：

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

译文：

       把layout viewport想像成为一张无法改变大小或形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。这个小框架的周围包裹着不透明材料，掩盖了你所有的视线，你只能看到这张大图的一部分。你通过这个框架所能看到的大图的一部分就是visual viewport。你可以后拉(放大)框架以观看整个图片，或者你可以靠近一些（缩小框架）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

visual viewport

visual viewport是页面当前显示在屏幕上的部分。

用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。

通过window.innerWidth/Height可获取visual viewport的大小。但当用户缩小或者放大的时候，度量的尺寸会发生变化，因为屏幕上的CSS像素会增加或者减少。
        该方式完全支持iPhone，Symbian，BlackBerry
       该方式在Android，Bolt，MicroB和NetFront上返回以CSS像素为单位的layout viewport尺寸。
       IE不支持该方式，只能通过
document.documentElement.offsetWidth/Height获取visual viewport的尺寸。

layout viewport

document.documentElement.clientWidth和-Height可以获取layout viewport的尺寸,该方法完全支持Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyfire, Obigo。

CSS像素

通过window.innerWidth来获取当前屏幕上有多少个CSS像素;
通过window.innerWidth也可获取visual viewport的宽度;

CSS布局，尤其是百分比宽度，是以layout viewport做为参照系来计算的，它被认为要比visual viewport宽。

html标签

document.documentElement.offsetWidth/Height提供了以CSS像素为单位的html标签的整个尺寸

缩放

两个viewport都是以CSS像素度量的。但是当进行缩放（如果你放大，屏幕上的CSS像素会变少）的时候，visual viewport的尺寸会发生变化，layout viewport的尺寸仍然跟之前的一样。（如果不这样，你的页面将会像百分比宽度被重新计算一样而经常被重新布局。）