Question

在我的CSS中，我有一个类似的媒体查询：

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

然后在我的jQuery中，我瞄准窗口宽度并执行一些操作。

编辑：根据下面的答案，我已经改变了这个功能，但我的JS和CSS仍然没有对齐。通过使用接受的答案中指定的Modernizr函数来解决该问题。

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

问题在于，当jQuery在800px或更高时执行时，CSS正在以740px开始。

这些不对齐是否存在已知问题？或者我的页面上是否会有影响CSS的内容以及为什么它是740px而不是800px？也许我应该使用其他东西而不是$(window)？

编辑：我在Safari中进行了测试，效果非常好。在Chrome和Firefox中，jQuery函数可以在800px上运行，CSS也是如此。但在Chrome中， CSS 实际上是在740px之后运行，即使媒体查询是800px - 我怎样才能让它们完美对齐？

Answer 1

您可以在JS中使用Modernizr到execute the media query（mq()方法将返回布尔值）：

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

Answer 2

移动宽度检查，否则viewportWidth变量将始终是相同的：

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

Answer 3

有效代码为：

$(window).resize(function() {

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

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

每次调整窗口大小时，新值将存储在viewportWidth变量中。在您的代码中，viewportWidth在页面加载时获得$(window).width()的唯一值。

Answer 4

我刚试过的，似乎有用，就是使用CSS媒体查询来设置对象样式，然后使用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)

Answer 5

我同意史蒂夫的回答。 jquery（window）.width（）;是与媒体查询不匹配，甚至不提供准确的窗口宽度大小。这是我从史蒂夫那里得到的答案和修改过的。

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
    }

});

就是这样〜希望它有所帮助。

CSS Media Query和Javascript / jQuery不匹配

5 个答案: