4

I'm exploring built-in objects in JavaScript, and have written the following to see their return values in Chrome.

console.log(window.innerWidth);
console.log(window.screen.width);

As far as I've seen from the book I'm reading, the Mozilla docs on these properties, and the question linked in the comments, the innerWidth will show the width value of viewport itself without any of the browser interface, and the screen width is supposed to show the full screen width of my computer.

However, regardless of how I resize the Chrome window, they're showing the same innerWidth value in the console. The screen width changes in value when I resize the window (a behavior I thought was exclusive to innerWidth) instead of staying what I thought would be more or less the "constant" value of my laptop's resolution.

I feel like this is painfully obvious! Is there a reason for this? Have I misunderstood the properties' values?

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Madeline Collins
  • 41
  • 5
  • Possible duplicate of [What is the difference between window.innerWidth and screen.width?](https://stackoverflow.com/questions/37443482/what-is-the-difference-between-window-innerwidth-and-screen-width) – Adam Fratino Jun 02 '18 at 17:31
  • I checked this exact question actually! It confirmed the behavior that I thought should be happening, but isn't happening. – Madeline Collins Jun 02 '18 at 17:41
  • I left an answer with a snippet to test in console. How exactly are you returning these values when you test? – Adam Fratino Jun 02 '18 at 17:42
  • The script is linked in an HTML file, and I'm opening that locally into Chrome and checking the console there. Only those two lines of JS are linked and the HTML is barebones. Starting to wonder if that's where this issue is arising. – Madeline Collins Jun 02 '18 at 17:52

1 Answers1

1

Paste this inside Chrome's console and you'll see they're returning two different values as you resize the browser, one static (your screen width) and one dynamic (the width of the browser's viewport).

window.addEventListener('resize', () => {
    console.log(window.screen.width, window.innerWidth)
})

I'm not sure how you're getting the wrong values, but both of these properties work correctly in Chrome.

Adam Fratino
  • 1,245
  • 10
  • 23
  • Thank you, ran that in the program. The innerWidth holds at about 980 pixels, until I resize the viewport past 1000 pixels, where at that point it changes pixel for pixel for the resize alongside screen width. The screen width changes pixel for pixel during the entire resize. Now they feel backwards behavior-wise. – Madeline Collins Jun 02 '18 at 17:50
  • What happens when you resize the display area in this fiddle? https://jsfiddle.net/gprdtoeg/ – Adam Fratino Jun 02 '18 at 17:53
  • It's doing exactly as I thought! The innerWidth is the only one changing, and the screen width is holding at the resolution of my screen at 1440. – Madeline Collins Jun 02 '18 at 17:55
  • Good news is it's working as intended so your book and MDN aren't lying to you. Sounds like there's possibly something wonky with your local environment, but I'm not sure where I could start helping you with that. – Adam Fratino Jun 02 '18 at 17:59
  • Aha! Yes, I tested in Safari and it's working seamlessly. Showing the correct values for the two there. I went back to Chrome to see if the Google homepage was returning the 'wrong' values as well, and it is. It's not just my file in Chrome. How odd. – Madeline Collins Jun 02 '18 at 18:07
  • I think I found the issue. I displayed the two values in the HTML instead of writing them to the console, and they returned the correct values. But as SOON as I open up the inspector and refresh the page, the values are wrong again. Seems to be displaying Chrome's inspector itself that is causing this issue. – Madeline Collins Jun 02 '18 at 18:20
  • Glad you got it sorted! – Adam Fratino Jun 03 '18 at 07:12