CSS 媒体查询和 Javascript/jQuery 不匹配答案

【问题标题】：CSS Media Query and Javascript/jQuery don't match upCSS 媒体查询和 Javascript/jQuery 不匹配
【发布时间】：2012-08-13 06:22:08
【问题描述】：

在我的 CSS 中，我有一个像这样的媒体查询：

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

然后在我的 jQuery 中，我以窗口宽度为目标并执行一些操作。

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

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

问题在于，当 jQuery 在 800 像素或更多像素上执行 bang 时，CSS 会在 740 像素处启动。

这些不对齐是否存在已知问题？或者我的页面上可能有什么东西影响了 CSS，为什么它是 740 像素而不是 800 像素？也许我应该使用其他东西来代替$(window)？

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

【问题讨论】：

标签： javascript jquery css media-queries

【解决方案1】：

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

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

【讨论】：

只是想补充一点，您需要在 min-width 媒体查询周围加上一对括号才能使第二个选项起作用（已编辑答案）：Modernizr.mq('(min-width: 800px)')
这是对我有用的第二个功能。您能否编辑您的回复以反映这一点？通过使用 Modernizr，我的 JS 与我的 CSS 完美对齐。

【解决方案2】：

移动你的宽度检查，否则viewportWidth 变量将永远是同一件事：

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

【讨论】：

【解决方案3】：

有效的代码是：

$(window).resize(function() {

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

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

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

【讨论】：

【解决方案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)

【讨论】：

【解决方案5】：

我同意史蒂夫的回答。 jquery(window).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
    }

});

就是这样~希望对你有帮助。

【讨论】：