CODEWITHSUNDEEP
javascripthtmlwidthviewport
user1476044
user1476044

Reputation: 397

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?

Upvotes: 10

Views: 15474

Answers (7)

Anas Shaikhany
Anas Shaikhany

Reputation: 85

Solution for windows 11 machines
Go to Settings > Display > Scale & Layout, and change it to 100%,
Afterwards you should see the screen resolution as your code output,
Note: this is not recommended because you will experience difficult text size to read.
Explanation
Some systems like windows scale the app viewport, this is because of screen nowdays have denser pixels per inch value, so text will be small.
To get a deeper understanding, imagine a typical laptop screen width 14 inch that has a 1920 pixels on width.
if you set the font to be 20px, then your text will have the following size:
text-size-in-inch = font-size-in-pixel * screen-width-in-inch / screen-pixels.
So if you do the math it will be :
text-size-in-inch = 20 * 14 / 1920 = .1458333... inch.
So it's really very small, thus systems tends to scale these screens by 125%, which is, in your case, your screen width will be = 1920 / 125% = 1536 px
Recommendation
You should adapt your code to work with any screen resolution

Upvotes: 1

Greg Grundy
Greg Grundy

Reputation: 131

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?

Upvotes: 8

Cristiam Da Silva
Cristiam Da Silva

Reputation: 111

Check your viewport meta tag. It should be:

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

Upvotes: 7

klaus thorn
klaus thorn

Reputation: 230

If you configure for example Microsoft Windows 7 to display text 25% bigger, then Firefox reports your screen to be 1/1.25 times it's actual size. Which is exactly 1536 for actual 1920.

(Even rectangles in a canvas are drawn 25% too big then. Been there, gone mad.)

Upvotes: 3

Oscar Paz
Oscar Paz

Reputation: 18292

You code works well for me. It says 1600 (I've got a 1600 x 900 screen). Is your browser maximised when you call the code? Maybe your resolution is 1536 x something and you've got your screen stretched? I'd check it out in your screen settings. Another way to try it is to open Chrome and the Devtools and then resize the browser. It will show you the browser window dimensions.

Upvotes: -1

user3095977
user3095977

Reputation:

Firstly:
Are you sure that's your viewport width? Do you want to get the width of the browser window or the whole screen? If you want to get the width of the whole screen that's impossible in JavaScript.
Secondly:
Try this to get the width of the browser window:

function GetWidth()
{
var width = document.body.clientWidth;
document.write('<p>Your viewport width is '+width+'</p>')
}

Upvotes: 1

Viral Shah
Viral Shah

Reputation: 2246

I think you should try with jQuery Dimension Functions. Rather dealing with Javascript functions.

Most basics are

$(window).width() (to get the width of browser)

and

$(window).height() (to get the height of browser)

Hope this helps.

Upvotes: 6

Related Questions