如何让CSS mediaqueries与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);

在任何浏览器中都可以获得没有滚动条的宽度.

这个解决方案是(恕我直言)更好,因为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(以及其他具有该问题的浏览器)实际上似乎与Webkit浏览器相比,更接近W3C对媒体查询的建议.该建议指出视口宽度包括滚动条,JavaScript窗口宽度似乎不包括滚动条,因此不匹配.