设施像素 给出了您正在应用的任何设施的屏幕分辨率，能够通过 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.widthscreen.height拜访失去。 由设施像素测量失去。
窗口大小
就是浏览器中除过标题栏，工具栏，收藏夹等等局部，最初留给网页展现的可用空间(包含滚动条的大小)。
在js中能够通过
window.innerWidthwindow.innerHeight拜访失去。由css像素测量测到，放大放大网页，会扭转其值。
那有人会问，如果蕴含浏览器标题栏，工具栏，收藏夹时。高度怎么获取。别急，是上面
window.outerWidthwindow.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.scrollWidthdocument.documentElement.scrollHeight由css像素测量失去
本文参考A tale of two viewports — part one