CSS Media Query и Javascript/jQuery не совпадают



В моем CSS у меня есть медиа-запрос, такой как:

@media (min-width: 800px) { /* styles */ }

А затем в моем jQuery я нацеливаюсь на ширину окна и выполняю некоторые действия.

Edit: согласно ответам ниже, я изменил эту функцию, но мои JS и CSS все еще не выровнялись. Проблема была исправлена с помощью функции Modernizr, как указано в принятом ответе.

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

Проблема в том, что в то время как jQuery выполняет bang на 800px или больше, CSS работает на 740px.

Является есть известная проблема с этим не выравниванием? Или на моей странице может быть что-то, влияющее на CSS, и почему это 740px, а не 800px? Может быть, есть что-то еще, что я должен использовать вместо $(window)?

Edit: я протестировал Safari, и он работает отлично. В Chrome и Firefox функции jQuery работают на уровне 800px, как и CSS. Но в Chrome CSS на самом деле работает после 740px, даже если медиа-запрос равен 800px - как я могу выровнять их совершенно?

155   5  

5 ответов:

Вы можете использовать Modernizr для выполнения медиа-запроса в JS (метод mq() вернет логическое значение):

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 800px)')) {
        // do something
    }
});

Переместите проверку ширины, иначе переменная viewportWidth всегда будет одной и той же:

$(window).resize(function() {
    var viewportWidth = $(this).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

Допустимым кодом будет:

$(window).resize(function() {

    var viewportWidth = $(window).width();

    if (viewportWidth >= 800) {
        // do something
    }
});

При каждом изменении размера окна новое значение будет сохраняться в переменной viewportWidth. В коде viewportWidth получает единственное значение $(window).width() При загрузке страницы.

То, что я только что попробовал, и это, кажется, работает, - это использовать css media query для стилизации объекта, а затем использовать javascript, чтобы проверить, имеет ли объект этот стиль. Javascript спрашивает CSS, каков ответ, а не две части страницы определяют его отдельно:

CSS:

@media (min-width: 800px) {  
    #viewType {width:3px;}
}

HTML:

<div id="viewType" style="display:none"></div>

JavaScript:

var answer = ($("#viewType").width()==3)

Я согласен с ответом Стива. jquery (окно).width (); is не совпадает с запросами мультимедиа и даже не обеспечивает точного размера ширины окна. вот мой ответ, взятый у Стива и измененный.

CSS :
        @media (max-width: 767px) {

           //define your class value, anything make sure it won't affect your layout styling
           .open {
            min-width: 1px !important;
           }
        } 

        .open {
              min-width: 2px;
        }

Js:

// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.

$(window).on('resize orientation', function() {

    var media = $('.open').css('min-width');

    if( media == '1px') // means < 767px 
    {       
        // do your stuff
    }

});

Вот и все~ надеюсь, что это поможет.

    Ничего не найдено.

Добавить ответ:
Отменить.