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

Question

Я пытаюсь позволить 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 уже обрабатывается, но CSSnot.

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

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

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

Answer 1

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

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

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

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

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

Спасибо JackieChiles и Arjen за это решение!

Answer 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 background.

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

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

Answer 3

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

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

, что удобно идентично вашему CSS:

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

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

Answer 4

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

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

Answer 5

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

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