当devtools打开停靠在右边时,我能够注意到这两个属性的值有所不同。但最重要的是,我听说其中一个使用物理像素,另一个使用逻辑像素。这是真的?如果是,哪一个使用哪个?我无法在任何地方找到任何相关信息。
答案 0 :(得分:11)
这有点隐含在名字中。 :-) window.innerWidth
是窗口的内部宽度或更准确地视口(不包括工具栏,窗口镶边等;但包括占用的空间垂直滚动条,如果有的话)。 screen.width
是屏幕的宽度(不仅仅是浏览器窗口)。
所以,例如,现在我的浏览器窗口的innerWidth
为1197,但是如果我把它扩大到可能(比方说)1305。我的屏幕分辨率是1920x1080,所以{{1}无论我的浏览器窗口有多大,我的机器上总是1920年。
但最重要的是,我听说其中一个使用物理像素,另一个使用逻辑像素。
他们都应该在CSS pixels,我认为你称之为“逻辑”<在这里插入关于CSS的不合逻辑> ,但请注意,没有这方面的标准,只是一个工作草案:screen.width
,innerWidth
。该草案说,除非另有说明,否则其中的所有测量都是CSS像素,并且这些属性都没有另外说明。如果有实现使用物理像素为一个和CSS像素为另一个,我没有听说过它们(但我不确定我一定会有)。
答案 1 :(得分:2)
screen.width
是屏幕的宽度。例如,如果您的屏幕分辨率为1600x900,则screen.width
始终为1600
。
window.innerWidth
是浏览器窗口的内部宽度。如果您调整浏览器窗口的大小,window.innerWidth
将会更改。