How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

Question

I\'m trying to let jQuery take care of a menu, while CSS does something to the window background when resizing the browser.

So jQuery does something like this:

Answer 1

If you happen to be using Modernizr, you can include the media query polyfill, which simplifies media query checks to:

if (Modernizr.mq('all and (max-width: 966px)')) {
    ...
}

Which is conveniently identical to your CSS:

@media all and (max-width: 966px) {
    ...
}

If you can't use Modernizr's polyfill, then stick with checking against Math.max(document.width, window.innerWidth).