9

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?

Community
  • 1
  • 1
user1476044
  • 281
  • 1
  • 4
  • 13

7 Answers7

8

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?

Community
  • 1
  • 1
Greg Grundy
  • 131
  • 2
  • 6
7

Check your viewport meta tag. It should be:

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

Cristiam Da Silva
  • 111
  • 1
  • 4
  • It worked for me, but what is this? *viewport* and *initial-scale* ? – Mohammad Hossein Ganjyar May 21 '22 at 05:30
  • 1
    Viewport refers to the are of the website that is visible to a given user based on his/her device. This tag sets the browser width to the device width. The initial scale prevents the browser to initially show the website in with any zoom level. – Cristiam Da Silva May 22 '22 at 08:40
  • I've published an article about this subject: https://medium.com/@hossein.ganjyar/why-does-my-mobile-browser-seems-wrong-pixels-what-is-viewport-and-how-can-i-use-of-meta-tag-321890cbeef4 – Mohammad Hossein Ganjyar May 23 '22 at 13:22
5

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.

Viral Shah
  • 2,263
  • 5
  • 21
  • 36
2

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.)

klaus thorn
  • 220
  • 3
  • 8
1

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>')
}
  • Thanks for the suggestion but that doesn't seem to make any difference - see http://www.kilgore.org.uk/surfing/fixed4.html – user1476044 Mar 01 '14 at 10:57
  • I forgot to add, in reply to your question, yes it is the width of the browser window that I want to get. – user1476044 Mar 01 '14 at 11:10
  • @user1476044 I read a while ago that `innerWidth` had some problems cross-browser. But as I said above **TRY**. And it worked in that site! They use `document.body.clientWidth`. –  Mar 01 '14 at 14:06
  • @user1476044 By the way Viral Shah's example works, you forgot to refer to jQuery's library like this: ` –  Mar 01 '14 at 17:01
  • Thanks for the correction to fixed5.html but the page is still blank. Also, I don't understand what you mean by **TRY**. What is it that you think I haven't tried? – user1476044 Mar 02 '14 at 01:55
0

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

Anas Shaikhany
  • 65
  • 1
  • 1
  • 5
-1

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.

Oscar Paz
  • 18,084
  • 3
  • 27
  • 42
  • The browser window is maximised and the screen is 1920 pixels wide. I tried Chrome/Devtools and that says my window is 1740 wide with an 8px border making a total of 1756. Closer, but no cigar yet. – user1476044 Mar 01 '14 at 13:43