Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why isn't window.innerWidth returning the right value?

I am trying to solve the problem of using Javascript to determine the width of my browser's "window". I'm aware different people can mean different things in this context so to be specific I mean the area in green as in this post.

I've read the first two replies to that post and a number of other stackoverflow solutions to this problem, none of which I could get to work: I am using Firefox 27.0.1 with the window maximised on a monitor that is 1920 pixels wide. The scripts says my viewport is 1536 pixels wide. I expected 1920 (or something close).

Based on what I have seen, it seemed to me the simplest solution in my case was this code:

<html>
<head>
<script type="text/javascript">
function onAfterLoad() {
    document.write('<p>Your viewport width is '+window.innerWidth+'</p>');
}
</script>
</head>
<body onload="onAfterLoad();">
</body>
</html>

At the time of writing this code is here. This also says my viewport is 1536 pixels wide when I think it should be 1920.

Where am I going wrong please?

like image 554
user1476044 Avatar asked Mar 01 '14 10:03

user1476044


2 Answers

For me this problem is a result of browser zooming. Try control+scroll wheel to see if this changes the results your are getting. If so see How to detect page zoom level in all modern browsers?

like image 161
Greg Grundy Avatar answered Sep 27 '22 23:09

Greg Grundy


Check your viewport meta tag. It should be:

<meta name="viewport" content="width=device-width,initial-scale=1" />

like image 43
Cristiam Da Silva Avatar answered Sep 28 '22 01:09

Cristiam Da Silva