如何让 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 中打开此页面以获取问题的独立版本。 （Chrome 和 Safari 不会遇到这个问题。到目前为止：Webkit：+1，Gecko：-1，Trident：-1，Presto：-1。）

Answer 1

除了JackieChiles的解决方案：

使用

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

will always get you the width without scrollbars in any browser.

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

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

Answer 2

我在与媒体查询完全相同的时间触发 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（以及其他有问题的浏览器）实际上似乎符合 W3C 建议比 Webkit 浏览器更适合媒体查询。该建议指出视口宽度包括滚动条，而 JavaScript 窗口宽度似乎不包括滚动条，因此存在差异。

Answer 3

如果您碰巧使用 Modernizr，您可以包含媒体查询填充，它可以简化媒体查询检查

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

：与 CSS 相同：

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

如果您无法使用 Modernizr 的 polyfill，请继续检查 Math.max(document.width, window.innerWidth)。

Answer 4

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

来自 MDN 的“使用代码中的媒体查询”

Answer 5

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

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