设备像素提供您正在使用的任何设备的屏幕分辨率，并且可以通过screen.width/height访问。但不是一成不变的。例如，可以通过鼠标右键“显示设置”-“缩放和布局”来改变。如果缩放100%是19201080，那么缩放150%就是1280720个css像素，也就是你在css中给某个dom元素设置的像素值，比如width:100px；行高：20px；在js中，通过window.devicePixelRatio获取占用的物理像素分辨率与自身CSS像素分辨率的比值。一般情况下（网页没有缩放，或者缩放到100%），一个css像素会占用一个设备像素。但是，如果您将网页(ctrl+wheel)缩放到200%。那么css像素也会被等量缩放200%，占用设备像素的2倍宽和2倍高。总面积是4倍。当网页没有任何缩放时，1pxCSS像素等于1px设备像素，网页开始缩小，一个设备像素（深色部分）重叠几个css像素（浅色部分），网页开始放大，正好相反，一个css像素和几个device像素这里要注意像素重叠。我们的重点始终是css像素，因为它与我们html的样式部分密切相关。这里在缩小和放大的时候。我们的csspixelsize从来没有变过（原来样式是多少，现在是多少）。只是布局被浏览器自动拉伸或挤压了。屏幕尺寸我们的屏幕通常是这样的。屏幕的大小就是电脑显示器屏幕的大小，可以通过js中的screen.widthscreen.height来获取。以设备像素测量。窗口大小是浏览器中除标题栏、工具栏、收藏夹等以外，留给网页显示的可用空间（包括滚动条的大小）。在js中，可以通过window.innerWidthwindow.innerHeight来访问。通过css像素测量来测量，放大和缩小网页会改变它的值。那么有人会问，浏览器的标题栏、工具栏、收藏夹是不是都包含了。如何获得高度。不用担心，下面就是window.outerWidth和window.outerHeight，因为window.innerWidth是用css像素来衡量的。当浏览器放大时，window.innerWidth/window.innerHeight变小，这说明窗口中可以放置的内容变少了。即1px的css像素拉伸变大了。当浏览器缩小时，window.innerWidth/window.innerHeight会增加，这说明窗口中可以放置的内容增加了。即1pxcss像素压缩减少。而window.outerWidth确实是以设备像素来衡量的，放大和缩小网页对其值没有影响。所以window.innerWidth和window.outerWidth相差一个字，但是内部处理却差了一大截。滚动偏移表示滚动条距其初始位置的距离。水平和垂直偏移分别可以通过下面的js获取，通过css像素测量window.pageXOffsetwindow.pageYOffset如果浏览器放大或缩小，滚动偏移也会发生变化。视口大小是指html元素的大小，不包括滚动条。滚动条的大小小于window.innerWidth/window.innerHeight。它与页面内内容的大小无关。通过下面的//document.documentElement指向html元素document.documentElement.clientHeight得到document.documentElement.clientWidth，height也是用css像素来衡量的。如果想获取页面大小被滚动条隐藏的部分。然后您可以使用以下document.documentElement.scrollWidthdocument.documentElement.scrollHeight从css像素测量中获取它。本文指的是两个视口的故事——第一部分
