JQuery window width sometimes returns wrong value

Question

SOMETIMES when I call:

$(window).width(); 

the wrong value is incorrect (in all browsers except IE, in IE this is always correct). I use the line:

 $('div.container p').text($(window).width()); 

to change the text of the p element so that I can see what value was returned when the window was resized. Here is an example when the return value is incorrect:

In the upper right corner you can see what actual sizes are in Chrome.

I noticed that WHEN the value is incorrect, it is always turned off by 17 pixels.

NOTE that the return value is NOT always erroneous, so in most cases the window looks as it should.

Help!

Answer 1

@Inacio Schweller is true.

To get a consistent cross-browser result, you can use a version other than jQuery:

window.innerWidth

Try entering this into your browser console and you will see that it returns a consistent result regardless of the browser you use.

Note. The non-jQuery version of window.outerWidth returns the same result in IE and Chrome, but returns a slightly lower value in Firefox.

Answer 2

This is due to the scroll bar of the browser view window. If you minimize the window enough to display the scroll bar, the viewport will say that it is 17 pixels smaller than your value. If the window is full, the 17px difference will not appear.