javascript - What is the difference between window.innerWidth and screen.width?

Question

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.

Answer 1

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).