关于javascript:设备像素和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