window.innerWidth和screen.width有什么区别？

Question

当devtools打开停靠在右边时，我能够注意到这两个属性的值有所不同。但最重要的是，我听说其中一个使用物理像素，另一个使用逻辑像素。这是真的？如果是，哪一个使用哪个？我无法在任何地方找到任何相关信息。

Answer 1

这有点隐含在名字中。 :-) window.innerWidth是窗口的内部宽度或更准确地视口（不包括工具栏，窗口镶边等;但包括占用的空间垂直滚动条，如果有的话）。 screen.width是屏幕的宽度（不仅仅是浏览器窗口）。

所以，例如，现在我的浏览器窗口的innerWidth为1197，但是如果我把它扩大到可能（比方说）1305。我的屏幕分辨率是1920x1080，所以{{1}无论我的浏览器窗口有多大，我的机器上总是1920年。

  

但最重要的是，我听说其中一个使用物理像素，另一个使用逻辑像素。

他们都应该在CSS pixels，我认为你称之为“逻辑”＆lt;在这里插入关于CSS的不合逻辑＆gt; ，但请注意，没有这方面的标准，只是一个工作草案：screen.width，innerWidth。该草案说，除非另有说明，否则其中的所有测量都是CSS像素，并且这些属性都没有另外说明。如果有实现使用物理像素为一个和CSS像素为另一个，我没有听说过它们（但我不确定我一定会有）。

Answer 2

screen.width是屏幕的宽度。例如，如果您的屏幕分辨率为1600x900，则screen.width始终为1600。

但是，

window.innerWidth是浏览器窗口的内部宽度。如果您调整浏览器窗口的大小，window.innerWidth将会更改。