Как заставить медиазапросы CSS работать с jQuery $ (window) .innerWidth ()?

Я пытаюсь позволить jQuery позаботиться о меню, в то время как CSS что-то делает с фоном окна при изменении размера браузера.

Итак, jQuery делает что-то вроде этого:

if ( $(window).innerWidth() < mediaQueries['small']) {
    // (where 'small' would be 966)
    // Perform jQuery stuff on a menu ul
}

А CSS имеет что-то вроде этого:

@media all and (max-width: 966px) {
    body {
        background: url(smallback.jpg) no-repeat 0 0;
    }
}

При использовании Firefox есть промежуток в 17 пикселей (который, кажется, является шириной вертикальной полосы прокрутки), в котором уже есть материал jQuery. обрабатывается, а CSS - нет.

Поскольку другие браузеры могут использовать разную ширину для своих полос прокрутки, простое добавление 17 пикселей в CSS на самом деле не решит проблему. Итак, как мне заставить jQuery учитывать полосы прокрутки? $ (window) .innerWidth () , похоже, не делает этого для меня.

Любая помощь будет принята с благодарностью.

Откройте эту страницу в Firefox, Opera или IE для изолированной версии проблемы. (Chrome и Safari не страдают от этой проблемы. До сих пор: Webkit: +1, Gecko: -1, Trident: -1, Presto: -1.)