Как получить мультимедийные запросы 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 отсутствует.

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

Любая помощь будет очень оценена.

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

Ответ 1

В дополнение к решению JackieChiles:

Использование

var width = Math.max( $(window).width(), window.innerWidth);

всегда будет иметь ширину без полос прокрутки в любом браузере.

Это решение (IMHO) лучше, потому что JS не зависит от какого-либо CSS.

Благодаря JackieChiles и Arjen для этого решения!

Ответ 2

Мое решение запуска JavaScript в то же время, что и медиа-запросы (даже с учетом особенностей устройства или браузера, как показано здесь), заключается в том, чтобы вызвать мою логику window.resize в ответ на изменение, сделанное медиа-запросом. Вот пример:

CSS

    #my-div
    {
        width: 100px;
    }

    @media all and (max-width: 966px)
    {
        #my-div
        {
            width: 255px;
        }
    }

JavaScript

    var myDivWidth;

    $(document).ready(function() {
        myDivWidth = $('#myDiv').width();

        $(window).resize(function () {
            if ($('#myDiv').width() != myDivWidth) {
                //If the media query has been triggered
                myDivWidth = $('#myDiv').width();
                //Your resize logic here (the jQuery menu stuff in your case)
            }
        });
    });

В этом примере, когда #myDiv изменяет размер (который будет возникать при запуске медиа-запроса), будет также запущена ваша логика изменения размера jQuery.

Для простоты я использовал ширину элемента, но вы можете легко использовать любое свойство, которое вы меняете, например фон body.

Другим преимуществом этого подхода является то, что он сохраняет функцию window.resize как можно более легкую, что всегда хорошо, потому что она вызывается каждый раз, когда размер окна изменяется на один пиксель (в любом случае в большинстве современных браузеров).

Ошибка, с которой вы столкнулись, кажется мне проблемой, связанной с браузером, как вы сказали. Хотя кажется интуитивно интуитивно, Firefox (и другие браузеры с проблемой) на самом деле похоже на рекомендацию W3C для медиа-запросов более подробно, чем браузеры Webkit, В рекомендации указывается, что ширина видового экрана включает полосы прокрутки, а ширина окна JavaScript, по-видимому, не включает полосы прокрутки, и, следовательно, неравномерность.

Ответ 3

Если вы используете Modernizr, вы можете включить медиа-запрос polyfill, который упрощает проверку запросов на медиа:/p >

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

Что удобно для вашего CSS:

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

Если вы не можете использовать Modernizr polyfill, тогда придерживайтесь проверки с Math.max(document.width, window.innerWidth).

Ответ 4

window.matchMedia - это способ, которым вы можете запускать события, когда переключатели мультимедиа включаются или выключаются. Это новое, так широко не поддерживаемое, но кажется довольно полезным.

"Использование медиа-запросов из кода" из MDN

Ответ 5

var viewport = jQuery(window).innerWidth();

if( viewport > 979 )
{
  // your code here
}