设备像素和CSS像素——web端

设备像素 给出了您正在使用的任何设备的屏幕分辨率，可以通过 screen.width/height 获取。
但并不是不可更改的。比如可以通过 鼠标右键"显示设置"——"缩放与布局"改变。如果缩放100%是19201080，那么缩放150%就是1280720

css像素 就是你给某一个dom元素在css中设置的像素值，比如 width:100px; line-height:20px;

在js中，通过window.devicePixelRatio 来获取 占用物理像素分辨率与本身CSS像素分辨率之比。

正常情况下(网页没有缩放，或者缩放为100%)，一个css像素会占用一个设备像素。
但是如果你缩放网页(ctrl+滚轮)到200%。那么css像素也会同等缩放200%，会占用设备像素2倍的宽度，2倍的高度。整体面积也就是4倍。

网页没有任何缩放时，1px CSS像素等于1px设备像素

网页开始缩小，一个设备像素(深色部分)与好几个css像素重叠(浅色部分)

网页开始放大，刚好相反，一个css像素与好几个设备像素重叠

在这里注意一点，我们的关注点，始终是css像素，因为它才是与我们html中style部分息息相关的。
这里缩小和放大时。我们的css像素大小始终没变（原来style中是多少，现在还是多少）。只是布局被浏览器自动拉伸或挤压了。

屏幕大小
我们的屏幕通常是这样的

screen的大小就是电脑显示器屏幕的大小

在js中可以通过

screen.width
screen.height

访问得到。 由设备像素测量得到。

窗口大小
就是浏览器中除过标题栏，工具栏，收藏夹等等部分，最后留给网页展示的可用空间(包括滚动条的大小)。

在js中可以通过

window.innerWidth
window.innerHeight

访问得到。由css像素测量测到，放大缩小网页，会改变其值。

那有人会问，如果包含浏览器标题栏，工具栏，收藏夹时。高度怎么获取。别急，是下面

window.outerWidth
window.outerHeight

由于window.innerWidth是通过css像素来测量的。当浏览器放大是，window.innerWidth / window.innerHeight减少，表现出来的是窗口中可以放置的内容变少。即1px css像素拉伸变大
当浏览器缩小是，window.innerWidth / window.innerHeight会增大，表现出来的是窗口中可以放置的内容变多。即1px css像素压缩减少。

而window.outerWidth确是由设备像素测量得到，放大缩小网页，对其值没有任何影响。所以window.innerWidth和window.outerWidth差一个单词，但内部处理却差了十万八千里。

滚动偏移量
表示滚动条距离初始位置的距离。

水平和垂直偏移量分别可以通过以下js获取，由css像素测量得到

window.pageXOffset 
window.pageYOffset

如果放大或者缩小浏览器，则滚动偏移量也会变化

视口大小
指html元素的大小，不包含滚动条。比window.innerWidth / window.innerHeight少个滚动条的大小。与网页里面内容的大小无关。通过下面获取

document.documentElement.clientWidth   //document.documentElement指向 html元素
document.documentElement.clientHeight

也是由css像素测量得到

如果还想获取包含被滚动条隐藏掉的那一部分页面大小。则可以使用下面

document.documentElement.scrollWidth
document.documentElement.scrollHeight

由css像素测量得到

本文参考A tale of two viewports — part one