CSS media queries and jQuery window .width() do not match

For a responsive template, I have a media query in my CSS:

@media screen and (max-width: 960px) {
    body{
       /*  something */
       background: red;
    }
}

And, I made a jQuery function on resize to log the width:

$(window).resize( function() {
    console.log( $(window).width() );
    console.log( $(document).width() ); /* same result */
    /* something for my js navigation */
}

And there a difference with CSS detection and JS result, I have this meta:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

I suppose it's due to the scrollbar (15 px). How can I do this better?