javascript - jQuery 窗口宽度不等于 CSS 的窗口宽度

Question

我正在使用以下两段 CSS 和 JS 代码:

@media (max-width: 720px) {
    // a code to make arrows in a carousel disappear
}

if(jQuery(window).width() <= 720){
    // a code to make arrows in the carousel stop working
}

它们的问题在于后者恰好在 width=738px 而不是 720px 上执行。我怀疑这是因为浏览器的垂直滚动条在 Chrome 中的宽度等于 18px。

有没有办法统一这个？无论滚动条的宽度如何，我都希望这些操作在所有浏览器中同时发生。

测试(当浏览器为@720px且CSS已经执行时):

jQuery(document).innerWidth() = 703
jQuery(window).innerWidth() = 703
jQuery(document).width() = 703
jQuery(window).width() = 703
jQuery('body').width() = 703
jQuery('html').width() = 703

Answer 1

我刚才不得不解决同样的问题，到目前为止我找到的最正确的解决方案是使用媒体查询将实际窗口大小传递给 Javascript。您必须遵循以下步骤:

• 将隐藏元素添加到您的页面，
• 使用媒体查询更改该元素的 max-width 属性，
• 通过 Javascript 读回该元素的 max-width 属性。

例如，将以下元素添加到您的页面:

<div id="currentMedia"></div>

然后编写如下CSS规则:

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    /* Make arrows in the carousel disappear... */

    #currentMedia {
        max-width: 720px;
    }
}

然后，从 Javascript 端，您可以编写:

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Make arrows in the carousel stop working...
}

无论滚动条大小如何，它都是准确的，因为该值来自触发轮播消失的同一媒体查询。

我在所有最新的主流浏览器上测试了这个解决方案，它给出了正确的结果。