CSS Media Query和Javascript / jQuery不匹配

In my CSS I have a media query like so:

在我的CSS中,我有一个像这样的媒体查询:

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

And then in my jQuery, I'm targeting the window width and performing some actions.

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

Edit: as per the answers below, I have changed this function but my JS and CSS still didn't align. The problem was fixed by using the Modernizr function as specified in the accepted answer.

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

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

The problem is that while the jQuery is executing bang on 800px or more, the CSS is kicking in at 740px.

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

Is there a known problem with these not aligning? Or could there be something on my page affecting the CSS and why it's 740px not 800px? Maybe there's something else I should be using instead of $(window)?

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

Edit: I've tested in Safari and it works perfectly. In Chrome and Firefox, the jQuery functions run spot on to 800px and so does the CSS. But in Chrome, the CSS actually runs after 740px, even though the media query is 800px - how can I get these to align perfectly?

编辑:我已经在Safari中测试过它完美无缺。在Chrome和Firefox中,jQuery函数可以在800px上运行,CSS也是如此。但是在Chrome中,CSS实际上是在740px之后运行,即使媒体查询是800px - 我怎样才能让它们完美对齐?

5 个解决方案

#1

You can use Modernizr to execute the media query in JS (the mq() method will return a boolean):

您可以使用Modernizr在JS中执行媒体查询(mq()方法将返回一个布尔值):

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

#2

Move your width check, or else the viewportWidth variable will always be the same thing:

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

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

#3

Valid code would be:

有效代码是:

$(window).resize(function() {

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

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

Everytime window resizes the new value will be stored in viewportWidth variable. In your code viewportWidth gets the only value of the $(window).width() when the page was loaded.

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

#4

What I just tried, and it seems to work, is to use the CSS media query to style an object, and then use javascript to test if the object has that style. Javascript is asking CSS what the answer is, rather than having two parts of the page determine it separately:

我刚刚尝试过,似乎工作,是使用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)

#5

I agree with Steve answer. the jquery(window).width(); is does not match with the media queries and even doesn't provide accurate window width size. here is my answer taken from Steve and modified.

我同意史蒂夫的回答。 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
    }

});

That's it~ hope it help.

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

#1