Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

window.innerWidth in Chrome's device mode

Tags:

When in google chrome's device mode, what does window.innerWidth return? Is it the viewport of the device (plus any scroll bars)?

I'm getting different values for the device's width x height (the dimensions on top of the page - the device's viewport?) and window.innerWidth x window.innerHeight (browser's viewport?). Is this supposed to happen?

Here's a picture of what I'm getting, and the code I used.

image

<!doctype html>
<html>
<head></head>
<body>
<script>
var image;

window.onload = function() {
  image = document.getElementById("img");
  checkWindowSize();
  window.addEventListener('resize', function(event){
    checkWindowSize();
  });
}

function checkWindowSize() {
  var width = window.innerWidth,
      height = window.innerHeight;

  console.log("window.innerHeight: ", window.innerHeight, " window.innerWidth: ", window.innerWidth);
}
</script>

<img id="img" class="vid-img-filter" src="http://i.imgur.com/jkhFJMn.jpg" alt="">
</body>
</html>
like image 527
jonGomez Avatar asked Mar 30 '16 00:03

jonGomez


Video Answer


2 Answers

window.innerWidth and innerHeight return the dimensions of the visual viewport. In desktop browsers, this is generally the browser's window dimensions. On mobile the situation is a bit more complicated because of pinch zoom.

When you load a page without a <meta name="viewport"> tag, a default layout width is used (e.g. Chrome uses 980px). When the browser loads the page it does so maximally zoomed out. It looks like your device size above has a width of 425px so the browser zooms out when the page is loaded to see the whole 980px. If you have content that's wider than this (e.g. your image) it'll zoom out even further. Seeing as how your window.innerWidth is 1248, that implies a scale factor of about 30%.

tl;dr: innerWidth/innerHeight reflect viewport with the pinch-zoom factor applied and the page is loaded fully zoomed out.

EDIT: This has since changed in Chrome. window.innerWidth now returns the layout viewport width. To get the visual viewport width, use window.visualViewport.width. See this article for more details.

like image 166
David Bokan Avatar answered Sep 22 '22 17:09

David Bokan


I'm not sure if this is a recent update (since the last responses), but I was able to find the viewport height/width by using:

window.screen.width

and

window.screen.height

This was particularly useful when I was trying to test whether the screen was phone-sized or not.

like image 35
a_lovelace Avatar answered Sep 19 '22 17:09

a_lovelace