Why does $(window).width() change while the page is loading?

Question

I noticed that my scripts were setting widths incorrectly, so I tried the following snippet:

var prev;
setInterval(function(){
    if($(window).width()!=prev)
        console.log(prev=$(window).width());
},1);

This printed 2 different values: 1464 and 1481. Since these are 17px apart, I'm almost certain this is caused by scrollbars. The second value is the correct value.

Why does $(window).width() change without resizing the window? Shouldn't it return the browser window's width, which should be constant?

Answer 1

$(window).width() returns the width of the window object excluding scrollbars (otherwise known as the viewport width). Depending on the operating system and browser, the vertical scrollbar can often subtract from the viewport width. This means you should call this function once all your content has been loaded, and you'll need to call it again if the content changes.

Putting this in the $.ready() function won't guarantee that you'll get the correct width with respect to the final page content. This is because $.ready fires when the DOM is loaded, but there might still be images/fonts that can affect the layout. It's very possible that a scrollbar can get added after you call $.ready(). The easiest solution to this problem is to place your call inside the $(window).load() function instead, as this fires when all content has been loaded, and there's nothing more to render.

Generally speaking, it's a good idea to set the width on DOM ready, window load, window resize, and any time the content changes. This can be done like so:

$(function() {
  var window_width;

  function set_window_width() {
    window_width = $(window).width();

    // do something with window_width
  }
  set_window_width(); // set width on DOM ready

  $(window).on('load resize', set_window_width); // set width on window load and resize

  function custom_load_content() {
    // load / change content

    set_window_width();
  }
});

Most (if not all) of the time, the viewport width is what you want. You're probably using the width to perform some calculations and/or resize some elements, and this should always be relative to the viewport, because your CSS is relative to the viewport. But, if for some reason you want to get the width including scrollbars, you can use window.innerWidth instead (source).