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

Question

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 - как я могу выровнять их совершенно?

716 5

jQuery javascript css css3 media-queries

5 ответов:

Comments

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

Jonathan Wilson · Accepted Answer · 2013-10-21 18:30:12

Вы можете использовать Modernizr для выполнения медиа-запроса в JS (метод mq() вернет логическое значение):
$(window).resize(function() {
    if (Modernizr.mq('(min-width: 800px)')) {
        // do something
    }
});

Neal · Accepted Answer · 2012-08-16 23:39:42

Переместите проверку ширины, иначе переменная viewportWidth всегда будет одной и той же:
$(window).resize(function() {
    var viewportWidth = $(this).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

Roman · Accepted Answer · 2012-08-16 23:43:39

Допустимым кодом будет:
$(window).resize(function() {

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

    if (viewportWidth >= 800) {
        // do something
    }
});
При каждом изменении размера окна новое значение будет сохраняться в переменной viewportWidth. В коде viewportWidth получает единственное значение $(window).width() При загрузке страницы.

Steve · Accepted Answer · 2013-06-12 23:56:05

То, что я только что попробовал, и это, кажется, работает, - это использовать 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)

Edwin Wong · Accepted Answer · 2014-01-14 07:35:10

Я согласен с ответом Стива. 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
    }

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