title: How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?
body: <p>I'm trying to let jQuery take care of a menu, while CSS does something to the window background when resizing the browser.</p>
  
  <p>So jQuery does something like this:</p>
  
  <pre><code>if ( $(window).innerWidth() &lt; mediaQueries['small']) {
      // (where 'small' would be 966)
      // Perform jQuery stuff on a menu ul
  }
  </code></pre>
  
  <p>And CSS has something like this:</p>
  
  <pre><code>@media all and (max-width: 966px) {
      body {
          background: url(smallback.jpg) no-repeat 0 0;
      }
  }
  </code></pre>
  
  <p>When using Firefox, there's a gap of 17 pixels (which seems to be the vertical scrollbar width) in which the jQuery stuff is already handled, but the CSS is not.</p>
  
  <p>As other browsers may use different widths for their scrollbars, just adding 17px to the CSS won't really fix the problem. So how do I get jQuery to take the scrollbars into account? <code>$(window).innerWidth()</code> doesn't seem to do that for me.</p>
  
  <p>Any help would greatly be appreciated.</p>
  
  <p>Open <a href="http://www.hotkeys.nl/stackoverflow-jquery-vs-mediaqueries.html">this page</a> in Firefox, Opera or IE for an isolated version of the problem. (Chrome and Safari don't suffer from this problem. Thusfar: Webkit: +1, Gecko: -1, Trident: -1, Presto: -1.)</p>