CODEWITHSUNDEEP
javascriptbuilt-in
Madeline Collins
Madeline Collins

Reputation: 41

innerWidth and screen width showing same values?

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?

Upvotes: 4

Views: 1855

Answers (1)

Adam Fratino
Adam Fratino

Reputation: 1251

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.

Upvotes: 1

Related Questions