Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 664
zamfofex Avatar asked May 25 '16 17:05

zamfofex


People also ask

What is window innerWidth?

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.

How do you measure window width?

Use window. innerWidth and window. innerHeight to get the current screen size of a page.

What is screen width and height?

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

What is innerHeight of window?

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.


1 Answers

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

like image 97
T.J. Crowder Avatar answered Sep 24 '22 09:09

T.J. Crowder