33

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.

zamfofex
  • 487
  • 1
  • 4
  • 8
  • 2
    screen is literally the display port, e.g. your screen. window is JUST the window displaying that contains the browser. – Marc B May 25 '16 at 17:03
  • 3
    These types of questions are easily answered by simply looking at the documentation [window.innerWidth](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth) and [screen.width](https://developer.mozilla.org/en-US/docs/Web/API/Screen/width). – Heretic Monkey May 25 '16 at 17:06
  • Oh, okay. My window was maximized, so I couldn’t tell a difference. :-) Many apologies for bothering. Additionally, would you know if window.innerWidth returns the size of the window in physical/logical pixels? Thanks, and sorry again. – zamfofex May 25 '16 at 17:06
  • 2
    `I wasn’t able to find any information about this anywhere` Can you describe how you searched for it? I mean first link in google is http://stackoverflow.com/questions/4987309/screen-width-vs-visible-portion – Iłya Bursov May 25 '16 at 17:07
  • I searched for “innerWidth vs screen.width”. – zamfofex May 25 '16 at 17:08
  • @Zambonifofex then its 2nd link... – Iłya Bursov May 25 '16 at 17:34
  • 2
    Just to be clear: I did spend several minutes searching for this. I did try different queries and looked for what’s worth more than half of an entire Google page of search results. My mistake was assuming that they were similar properties; I was looking for the wrong information. I might be a derp, but if you think this is a dumb question, please know it wasn’t for the lack of researching. – zamfofex May 25 '16 at 17:41
  • 3
    It's not a dumb question. SO is full of questions like it and is a primary destination for many Google searches on basic documentation questions. The Q&A nature facilitates common misunderstandings and use cases not addressed in documentation to be conveyed to an individual in specific circumstances and with a specific level of expertise, which often represent a much broader group of people. Having multiple answers per question also permits one basic question to cater to a broader range of experience levels and circumstances. The existence of docs should not in itself be a reason not to ask. – Magnus Lind Oxlund Mar 21 '19 at 10:11
  • screen.width would be for detecting the width of the screen (so you know how small the device is) whereas innerWidth would be used to detect the width of the viewable browser (more useful typically). – Elijah Mock Dec 05 '19 at 00:06

3 Answers3

38

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

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
14

screen.width is the width of the screen. For example, if your screen has resolution of 1600x900, screen.width will always be 1600.

window.innerWidth though, is the inner width of the browser window. If you resize the browser window, window.innerWidth will change.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
1

For most cases, window.innerWidth is better suited for determining the device's screen width in JavaScript.

The reason for this is that window.innerWidth takes into account the width of the browser's viewport, which is the visible area of the webpage inside the browser window. This property is typically more useful for determining the available space for displaying content within the browser window, which is what most JavaScript code needs to know.

On the other hand, window.screen.width returns the width of the device's physical screen in pixels, which is less useful for JavaScript code since it does not take into account the size of the browser window or other UI elements on the screen.

Therefore, for most JavaScript use cases, window.innerWidth is the better choice. However, if you specifically need to know the physical screen size of the device, window.screen.width may be more appropriate.

S.M.Golam zilanir Rasel
  • 11
  • 2