jQuery and CSS media queries not in sync

Question

I've been trying to understanding the way window width is determined and I was wondering if it's different for CSS and jQuery.

If for example I have the CSS media query:

@media (max-width: 979px) {
  /*my css here*/
}

and also some jQuery:

if ($(window).width() < 979) {
  //my jQuery here
}

I would expect the following: - When the browser is resized & refreshed at 980px, both of the above will be ignored - When the browser is resized & refreshed at 978px, both of the above will activate.

However what I'm finding is that - The jQuery and CSS don't kick in until about 964px and below. - Sometimes (if I have window.resize enabled) the jQuery and CSS kick in at seperate widths (a few pixels apart).

Can anyone shed any light on what's going on here?

By the way I'm basing the window width on Firebug's layout viewer.

Answer 1

The problem is related to the scrollbar width: window.innerWidth will return the right value that is read by CSS media queries. Note that $(window).innerWidth() will return the wrong value.

For a cross-browser solution can be used a function like this:

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var value = viewport().width;

Answer 2

A bit off topic, but I assume you're trying to mimic when the javascript fires because you want to do something at the same time as the css breakpoint switches. If you want to have javascript do something when the media query fires, I've found it is easiest to poll for a change created by the css, rather than trying to mimic the way media queries fire (which is inconsistent in browsers due to reporting of scrollbar widths). For instance if at your breakpoint, element-x goes from position: relative to position: fixed, you can ensure your javascript is in line with your css by testing

if(elementX.css('position')== 'fixed'){
//code
}

rather than polling the document width.