jQuery and CSS media queries not in sync

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;

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.

Think you might want to use $(document).width() instead

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

http://api.jquery.com/width/

Media queries use the viewport width. I find that getting the html width is much more accurate when trying to match with CSS media queries. Using resize:

$(window).resize(function() {
  if ($('html').width() <= 979) {
    // Do something
  }
});