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

时间:2016-05-25 17:01:18

标签: javascript html css

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

2 个答案:

答案 0 :(得分:11)

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

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

  

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

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

答案 1 :(得分:2)

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

但是,

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