window.innerWidth和screen.width有什么区别？ [英] What is the difference between window.innerWidth and screen.width?

问题描述

开放工具开放对接，我能够注意到这两个属性的价值存在差异。但最重要的是，我听说其中一个使用物理像素，另一个使用逻辑像素。这是真的？如果是，哪一个使用哪个？我无法在任何地方找到关于此的任何信息。

解决方案

这是名称中隐含的一种。 :-) window.innerWidth 是窗口的内部宽度，或者更准确地说是视口（不包括工具栏，窗口镶边等;但包括由垂直滚动条，如果有的话）。 screen.width 是屏幕的宽度（不只是浏览器窗口）。

因此，例如，现在我的浏览器窗口有一个1197的 innerWidth ，但是如果我把它扩大，它可以是（比如说）1305.由于我的屏幕分辨率是1920x1080，因此屏幕无论我的浏览器窗口有多大，我的机器上的.width 总是1920。

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

它们都应该是在 CSS像素 中我假设你会在这里调用逻辑<插入双关于CSS不是逻辑> ，但请注意，目前还没有标准，只是一个工作草案： screen.width ， innerWidth 。草案说除非另有说明，其中的所有测量值都是以CSS像素为单位的，并且这些属性都没有注释。如果在那里使用一个物理像素和另一个CSS像素的实现，我还没有听说过它们（但我不知道我必然会有这些）。

With devtools opened docked to the right, I was able to notice a difference in the value of these two properties. But most importantly, I’ve heard one of them uses physical pixels, and the other one uses logical pixels. Is this true? If it is, which one uses which? I wasn’t able to find any information about this anywhere.

解决方案

It's kind of implicit in the names. :-) window.innerWidth is the inner width of the window or more accurately viewport (not including toolbars, window chrome, etc.; but including the space occupied by the vertical scrollbar, if any). screen.width is the width of the screen (not just the browser window).

So for instance, right now my browser window has an innerWidth of 1197, but if I make it wider it could be (say) 1305. By the resolution of my screen is 1920x1080, so screen.width on my machine will always be 1920, regardless of how big my browser window is.

But most importantly, I’ve heard one of them uses physical pixels, and the other one uses logical pixels.

They're both supposed to be in CSS pixels which I assume you'd call "logical" <insert pun here about CSS not being logical>, but note that there's no standard around this yet, just a working draft: screen.width, innerWidth. The draft says all measurements in it are in CSS pixels unless noted otherwise, and neither of those properties notes otherwise. If there are implementations out there using physical pixels for one and CSS pixels for another, I haven't heard of them (but I'm not sure I necessarily would have).

这篇关于window.innerWidth和screen.width有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！