jQuery and CSS media queries not in sync -

i've been trying understanding way window width determined , wondering if it's different css , jquery.

if example have css media query:

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

and jquery:

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

i expect following: - when browser resized & refreshed @ 980px, both of above ignored - when browser resized & refreshed @ 978px, both of above activate.

however i'm finding - jquery , css don't kick in until 964px , below. - (if have window.resize enabled) jquery , css kick in @ seperate widths (a few pixels apart).

can shed light on what's going on here?

by way i'm basing window width on firebug's layout viewer.

the problem related scrollbar width: window.innerwidth return right value read css media queries. note $(window).innerwidth() return wrong value.

for cross-browser solution can used function this:

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