这一节将解释说明viewport和各种重要元素的宽度是如何工作的，例如元素<html>，以及窗口和屏幕。
这个页面是关于桌面浏览器的，它的唯一目的是为移动浏览器的类似讨论奠定基础。大多数web开发人员已经直观地理解了大多数桌面概念。在移动设备上，我们会发现同样的概念，但是更加复杂，并且对每个人都已经知道的术语进行预先讨论将极大地帮助您理解移动浏览器。
第一个需要理解的概念是css像素，以及它与设备像素的差异。
设备像素被直观的认为是“正确”的像素。它给出了我们正在使用的各种设备的分辨率，可以通过读取screen.width/height获取具体的数值。
如果给一个元素设置宽度width:128px，你的显示器是1024px，最大化你的浏览器，8个给定宽度的元素刚好填满你的显示屏（当然这并非绝对精确，先忽略那些细节）。
如果用户使用放大或者缩小功能，填充的数量将会发生变化。如果放大浏览器到200%，那么填充1024宽度的显示器将只需要四个width：128px的元素。
在现代浏览器中，缩放只不过是“拉伸”像素。元素的宽度并没有从128px变化为256px，但是实际像素翻倍了。形式上，该元素依然具有128个css像素的宽度，但是却占据了256个设备像素。
换句话说，缩放到200%，使得CSS像素扩大为设备像素的四倍（宽度两倍，高度两倍，总为四倍）。
用几张图来说明这个概念。这里是一个缩放100%的四个像素。CSS像素与设备像素完全重叠。
现在来缩小，CSS像素就会缩小，也就是一个设备像素与多个CSS像素重叠。
再来放大，就会发生相反的情况。CSS像素开始变大，结果一个css像素可以多个设备像素重叠。
这里的重点是，你只需要关注CSS像素，因为它直接影响你如何呈现元素样式。
设备像素对您几乎毫无用处。不是对用户;用户会将页面放大或缩小，直到他能够舒服地阅读为止。然而，缩放级别对您来说并不重要。浏览器会自动确保你的CSS布局被拉伸或压缩。
最开始假设缩放100%，是时候给出一个确切的定义：
缩放级别100%，一个CSS像素正好等于一个设备像素。
100%缩放的概念对于理解接下来的内容很有用，但日常工作中，并不需要过多担心。在桌面，通常都是在100%缩放级别下测试你的网站，即使用户选择放大或者缩小操作，CSS像素的魔法会确保你的网站保持原有的布局。
看一看实际的测量。首先，screen.width和screen.height，它们分别表示用户屏幕的宽度和高度。这个数值大小的单位是设备像素，因为它们不会发生改变：它们是显示器的特征，并非浏览器的。
PS：IE7和IE8模式下，测量使用的是CSS像素。
Fun！但是我们用这个信息来做什么呢？
基本上，什么都不做。用户显示器的大小对我们来说并不重要——除非你需要将这些数据记录在web统计数据库中。
相反，你需要知道浏览器窗口的内部尺寸。这个大小就是你可以用来进行CSS布局的空间大小。可以通过window.innerWIdth和window.innerHeight得出这个数值。
PS：这个尺寸包含滚动条的宽度，单位是CSS像素。IE浏览器不支持。Opera得出的结果是设备像素单位。
显然，这个窗口的内部尺寸测量使用的是CSS像素。你需要知道你的布局有多少可以挤进浏览器窗口，当用户放大时，可以挤进去的内容就会减少。用户放大时，你可利用的窗口空间就会变小。window.innerWidth/Height数值就会反映出来。
Opera浏览器是一个例外。用户进行放大操作时，window.innerWidth/Height数值并不会发生变化。该数值的单位是设备像素。在桌面很烦人，在手机上确实非常致命的，下面再议。
记住，这个数值包含滚动条。滚动条也是包含在窗口的尺寸中（由于历史原因）。
window.pageXOffset和window.pageYOffset表示文档水平和垂直滚动的偏移量。通过这个数值，可以知道用户滚动了多少
这些测量数值是CSS像素单位的。无论缩放程度如何，你都可以知道文档被滚动了多少。
理论上，如果用户滚动了页面，然后再放大。window.pageX/YOffset会发生变化。事实上，浏览器试图通过在用户缩放时保持可见页面顶部的相同元素来保持web页面的一致性。虽然实际效果并不完美，但是重要的是window.pageX/YOffset并不会发生改变——滚动超出窗口的部分的CSS像素数值并不会发生改变。(经过测量，实际数值会发生非常微小的差距)
在继续介绍更多JavaScript属性之前，我们必须引入另一个概念:viewport。
原文：https://www.cnblogs.com/Jamie1032797633/p/10907704.html