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

by

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 1920×1080, 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).

More Related Contents:

  1. JS hide function error
  2. How to read with JavaScript [closed]
  3. How to implement something like this GIF that using mouse drag and select items
  4. Javascript counting all the characters from a HTML document
  5. Set cookie and get cookie with JavaScript [duplicate]
  6. Load and execution sequence of a web page?
  7. Check if an element contains a class in JavaScript?
  8. Disabling browser print options (headers, footers, margins) from page?
  9. JSFiddle code not working in my own page
  10. All About…. Z-Index?
  11. How to disable scroll without hiding it?
  12. Why my show hide button needs double-click on first time
  13. How to dynamically create ‘@-Keyframe’ CSS animations?
  14. Infinity Loop Slider Concepts
  15. Make anchor link go some pixels above where it’s linked to
  16. Where should I put the CSS and Javascript code in an HTML webpage?
  17. Opening new window in HTML for target=”_blank”
  18. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  19. jQuery vs document.querySelectorAll
  20. Center flex item in container, when surrounded by other flex items
  21. Dark mode flickers a white background for a millisecond on reload
  22. How to create checkbox inside dropdown?
  23. How to trigger CSS “hover state” using Javascript? [duplicate]
  24. Javascript-Setting background image of a DIV via a function and function parameter
  25. Gaussian Blur onHover Using jQuery
  26. Setting the height of a DIV dynamically
  27. assign color to mouse cursor using CSS
  28. Center an Image vertically and horizontally using CSS
  29. Change background on button click, using CSS only? [duplicate]
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment