Menu
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.
664
The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present. More precisely, innerWidth returns the width of the window's layout viewport.
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
It is usually quoted as width × height, with the units in pixels: for example, 1024 × 768 means the width is 1024 pixels and the height is 768 pixels. This example would normally be spoken as "ten twenty-four by seven sixty-eight" or "ten twenty-four by seven six eight".
innerHeight. The read-only innerHeight property of the Window interface returns the interior height of the window in pixels, including the height of the horizontal scroll bar, if present. The value of innerHeight is taken from the height of the window's layout viewport.
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).
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
