title: CSS media queries and jQuery window .width() do not match
body: <p>For a responsive template, I have a media query in my CSS:</p>
  <pre><code>@media screen and (max-width: 960px) {
      body{
         /*  something */
         background: red;
      }
  }
  </code></pre>
  <p>And, I made a jQuery function on resize to log the width:</p>
  <pre><code>$(window).resize( function() {
      console.log( $(window).width() );
      console.log( $(document).width() ); /* same result */
      /* something for my js navigation */
  }
  </code></pre>
  <p>And there a difference with CSS detection and JS result, I have this meta:</p>
  <pre><code>&lt;meta content=&quot;user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width&quot; name=&quot;viewport&quot;/&gt; 
  </code></pre>
  <p>I suppose it's due to the scrollbar (15 px). How can I do this better?</p>