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

我试图让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时，jQuery的内容已经被处理了17个像素(这似乎是垂直滚动条宽度)的差距，但CSS没有。

由于其他浏览器可能会为其滚动条使用不同的宽度，所以只需将17px添加到CSS将不会真正解决问题。那么如何让jQuery来考虑滚动条？ $(window).innerWidth()似乎没有为我做。

任何帮助将不胜感激。

打开this page在Firefox，Opera或IE中为孤立版本的问题。 (Chrome和Safari不会受到这个问题的影响)。因此，Webkit：1，Gecko：-1，Trident：-1，Presto：-1。)

解决方法

除了JackieChiles的解决方案外：

运用

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

在任何浏览器中，总会让您的宽度无滚动条。

这个解决方案是(IMHO)更好，因为JS不依赖于任何CSS。

感谢JackieChiles和Arjen为此解决方案！

原文地址：https://www.jb51.cc/css/218466.html