设备像素和CSS 像素

我们需要理解设备像素和CSS像素的概念，以及二者之间的差异。设备像素，顾名思义，就是设备的像素，它说明了设备的分辨率，一般我们可以通过screen.width/height来得到。而CSS像素是我们前端开发常用的，比如设置某个div的宽度是128px, 实际上是指CSS像素。

假如我们的浏览器宽度是1024px，那么在最大化窗口的情况下，浏览器宽是div宽的8倍；但如果我们放到浏览器窗口，比如放大到200%，则浏览器只有div的四倍宽。浏览器的放到实际上只不过是对像素进行拉伸。也就是说，div元素的宽度并没有从128px增加到256ox；而是实际的像素点比原来大了两倍。因此，div的宽度是128 CSS像素，但是占用了256的设备像素。

通过一些图片可以让我们更清楚这二者之间的差异。下面这张图是100%缩放的情景，这里没有什么奇怪的，CSS像素和设备像素完全重合。

现在我们来缩小页面。CSS像素也开始缩减，意味着一个设备像素现在覆盖了更多的CSS 像素

如果我们放大页面的话，相反的情况发生。CSS像素开始变大，然后一个CSS像素覆盖多个设备像素。

我们一般只关心CSS像素，因为样式表的渲染是根据CSS像素。

屏幕大小

屏幕大小可以同screen.width/height来得到，包含屏幕的总共宽和高。这两个尺寸是用设备像素测量的因为它们不会改变，反映的是用户监视器（而非浏览器）的特性

浏览器窗口大小

在我们平时的工作中，对我们更有用的是浏览器窗口的大小。浏览器窗口大小告诉我们的CSS布局的可用空间，可通过window.innerWidth/innerHeight得到。

很明显，窗口的内部宽度是用CSS像素测量懂得。我们需要知道我们的CSS布局内容有多少被放到了浏览器窗口，当用户放大的时候，这个内容就变少了。因此，如果用户放大页面，你在窗口中就只能看到更少的内容。window.innerWdith/Height通过减少来反映这种变化。（Opera浏览器是个例外，它的window.innerWidth/innerHeight不会减少在用户放大的时候，因为它们是用设备像素测量的。这个在桌面浏览器上不是什么大问题，但在移动浏览器上很致命，我们后面会看到）

要注意的是，测量出来的宽高包括滚动条。滚动条也被认为是内部窗口的一部分。

Scrolling offset

window.pageXOffset/pageYOffset包含了文档的水平和垂直股东距离。因此你可以找到用户滚动的距离。

这些属性也是用CSS 像素测量的。理论上，如果用户向上滚动页面，然后放大页面的时候，window.pageX/YOffset将会改变。但是浏览器试图让网页展现是一致的，所以在用户缩放时会让同样的元素仍然放在可视页的顶部。所以实际上window.pageX/YOffset并不会真正的改变：已经滚动在窗口范围之外的CSS像素（基本上）是不变的。

原文链接：A tale of two viewports — part one