如何让 CSS 媒体查询与 jQuery $(window).innerWidth() 一起使用？

Question

我试图让 jQuery 处理菜单，而 CSS 在调整浏览器大小时对窗口背景做一些事情。

所以 jQuery 做了这样的事情：

if ( $(window).innerWidth() < mediaQueries['small']) {
    // (where 'small' would be 966)
    // Perform jQuery stuff on a menu ul
}

而 CSS 有这样的东西：

@media all and (max-width: 966px) {
    body {
        background: url(smallback.jpg) no-repeat 0 0;
    }
}

使用 Firefox 时，有 17 个像素的间隙（这似乎是垂直滚动条的宽度），其中 jQuery 的东西已经被处理了，但 CSS 没有。

由于其他浏览器的滚动条可能使用不同的宽度，因此仅在 CSS 中添加 17px 并不能真正解决问题。那么如何让 jQuery 考虑滚动条呢？ $(window).innerWidth() 似乎不适合我。

任何帮助将不胜感激。

在 Firefox、Opera 或 IE 中打开 this page 以查看问题的独立版本。 （Chrome 和 Safari 没有遇到这个问题。到目前为止：Webkit：+1，Gecko：-1，Trident：-1，Presto：-1。）

Answer 1

var viewport = jQuery(window).innerWidth();

if( viewport > 979 )
{
  // your code here
}

Answer 2

如果您碰巧在使用Modernizr，您可以包含媒体查询 polyfill，它将媒体查询检查简化为：

if (Modernizr.mq('all and (max-width: 966px)')) {
    ...
}

这很方便地与您的 CSS 相同：

@media all and (max-width: 966px) {
    ...
}

如果您不能使用 Modernizr 的 polyfill，请坚持检查 Math.max(document.width, window.innerWidth)。

Answer 3

除了JackieChiles的解决方案：

使用

var width = Math.max( $(window).width(), window.innerWidth);

总是会在任何浏览器中为您提供不带滚动条的宽度。

这个解决方案（恕我直言）更好，因为 JS 不依赖任何 CSS。

感谢 JackieChiles 和 Arjen 提供的解决方案！

Answer 4

window.matchMedia 是一种在媒体选择器启动或关闭时触发事件的方法。它是新的，因此没有得到广泛支持，但似乎非常有用。

"Using media queries from code" from MDN

Answer 5

我在与媒体查询完全相同的时间触发 JavaScript 的解决方案（即使面对设备或浏览器的怪癖，如此处所示）是触发我的 window.resize 逻辑以响应媒体查询所做的更改。这是一个例子：

CSS

    #my-div
    {
        width: 100px;
    }

    @media all and (max-width: 966px)
    {
        #my-div
        {
            width: 255px;
        }
    }

JavaScript

    var myDivWidth;

    $(document).ready(function() {
        myDivWidth = $('#myDiv').width();

        $(window).resize(function () {
            if ($('#myDiv').width() != myDivWidth) {
                //If the media query has been triggered
                myDivWidth = $('#myDiv').width();
                //Your resize logic here (the jQuery menu stuff in your case)
            }
        });
    });

在本例中，每当#myDiv 改变大小（触发媒体查询时会发生）时，您的 jQuery 调整大小逻辑也将运行。

为简单起见，我使用了元素宽度，但您可以轻松使用要更改的任何属性，例如 body 背景。

这种方法的另一个优点是它使window.resize 函数尽可能轻量级，这总是好的，因为每次窗口大小更改单个像素时都会调用它（无论如何在大多数现代浏览器中）。

正如您所说，您遇到的错误在我看来是特定于浏览器的问题。虽然直观上看起来不正确，但 Firefox（和其他有问题的浏览器）实际上似乎比 Webkit 浏览器更接近于匹配 W3C recommendation for media queries。该建议指出视口宽度包括滚动条，而 JavaScript 窗口宽度似乎不包括滚动条，因此存在差异。