jquery $(window).width() and $(window).height() return different values when viewport has not been resized

Question

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport

Answer 1

I was having a very similar problem. I was getting inconsistent height() values when I refreshed my page. (It wasn't my variable causing the problem, it was the actual height value.)

I noticed that in the head of my page I called my scripts first, then my css file. I switched so that the css file is linked first, then the script files and that seems to have fixed the problem so far.

Hope that helps.

Answer 2

I think what you're seeing is the hiding and showing of scrollbars. Here's a quick demo showing the width change.

As an aside: do you need to poll constantly? You might be able to optimize your code to run on the resize event, like this:

$(window).resize(function() {
  //update stuff
});

Answer 3

Try to use a

• $(window).load event

or

• $(document).ready

  because the initial values may be inconstant because of changes that occur during the parsing or during the DOM load.

Answer 4

Note that if the problem is being caused by appearing scrollbars, putting

body {
  overflow: hidden;
}

in your CSS might be an easy fix (if you don't need the page to scroll).