why is $(window).height() so wrong?

Question

I'm trying to get the current browser viewport height, using

$(window).on('resize',function() { 
  console.log("new height is: "+$(window).height()); 
});

But I'm getting values that are way too low. When the viewport is around 850px tall, I'm getting values around 350 or 400px from height(). What's up?

Example: http://jsfiddle.net/forgetcolor/SVqx9/

To clarify - are you getting these errors _in jsFiddle_, or in a normal browser context? jsFiddle uses an iFrame, so the window won't be your entire window, just the smaller frame. — nrabinowitz, May 13 '12 at 04:27
You'll need a non-jsFiddle example, then - jsFiddle is always going to give you bad numbers here. — nrabinowitz, May 13 '12 at 04:29
@Blender True, however its `iframe` is nearly the size of the viewport. — Sampson, May 13 '12 at 04:43

score 58 · Answer 1 · answered Sep 22 '14 at 17:14

58

I was having the same problem in Firefox then I added <!DOCTYPE HTML> on my index and it worked.

Source: http://viralpatel.net/blogs/jquery-window-height-incorrect/

answered Sep 22 '14 at 17:14

Nilson Morais

821
1
7
6

score 12 · Accepted Answer · answered May 13 '12 at 04:32

12

One possible reason may be that you are checking the console with firebug/ something else. So that you don't get window height correct due to firebug height.

You can try something like this:

take a span/div in you document:

<span id="res"></span>

and then

$(window).on('resize',function() { 
  $('#res').html("new height is: "+$(window).height()); 
});

Or if you want to check out put on firebug console then detach it from browser and then check the result.

answered May 13 '12 at 04:32

The System Restart

2,873
19
28

And this is a very , very good tip. I've had this problem in Chrome having Developer window open. – Mikayil Abdullayev Feb 02 '16 at 12:33

ob.yann · Answer 3 · 2015-12-24T07:28:53.807

5

For those who still has problem after above solutions...

Please check the view ratio of browser onto your project.html..

The value of $(window).height() is not as same as 'real' pixels of client area when the view ratio adjusted! (and so others $(xx).width()...in this situation)

(The browser remembered my careless 110% ratio adjusted days ago...)

edited Dec 24 '15 at 07:28

answered Dec 24 '15 at 07:19

ob.yann

276
3
6

also look at ozzysong's reply [link](http://stackoverflow.com/a/23320757/233545) in another same problem – ob.yann Dec 24 '15 at 07:23

score 4 · Answer 4 · answered Jun 12 '19 at 12:07

4

I have seen jQuery's $(window).height() returning a wrong value on Chrome mobile, even though my viewport and DOCTYPE declarations were in place. Eventually I used window.innerHeight.

answered Jun 12 '19 at 12:07

jim_kastrin

4,830
2
26
28

Sampson · Answer 5 · 2012-05-13T04:57:02.603

3

No repro. Keep in mind that the window height is diminished by items in the browser's chrome, such as the address bar, developer tools, bookmarks toolbars and more. The following appears to show an accurate representation of the viewport height:

jsbin will give you a pretty good estimation of the window height, as it doesn't limit your code output to a small iframe like other js-testing sites such as jsfiddle.

http://jsbin.com/otaqej/edit#javascript,html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script>
  </head>
  <body>
    <div id="message">Height: 0</div>
    <script>
      $(window).on("resize", function(){
        $("#message").html( "Height: " + $(window).height() );
      });
    </script>
  </body>
</html>

edited May 13 '12 at 04:57

answered May 13 '12 at 04:38

Sampson

265,109
74
539
565

Is there any reason behind jsbin not working in IE9? However it worked fine in Firefox. – Nazmul May 13 '12 at 04:53
@Hoque Remy Sharp, the creator of JSBin, has been testing it extensively in later versions of IE. If you have any issues with it that you can specifically detail, please let him know on twitter: [@rem](https://twitter.com/#!/rem). – Sampson May 13 '12 at 04:56

score 2 · Answer 6 · answered May 13 '12 at 04:38

JSFiddle works by creating an <iframe> that gets loaded dynamically after you render the code.

Your JavaScript is calculating the height of the window, which happens to be the <iframe>'s height, which is around 400px tall for me.

Your code is doing what it should be.

why is $(window).height() so wrong?

6 Answers6

Linked