使 @media max-width 的行为与 $(window).width 相同

Question

在网站上工作时，我遇到了一个令人沮丧但合乎逻辑的重大问题。

看看this fiddle。

重要的 CSS：

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

div#wrapper {
    padding: 1em;
}

img {border: 4px solid blue;}

@media screen and (max-width: 480px) {
    img {border: 0 none;}
}

重要的jQuery：

function imgSize() {
    if ($(window).width() < 481) {
        $("img").css({
            "position": "relative",
                "width": $(window).width(),
                "max-width": "none",
                "left": "-1em",
                "float": "none"
        });
    } else {
        $("img").attr("style", "");
    }
}
imgSize();

$(window).resize(function() {
    imgSize();
});

尝试将结果窗口设置为小于 481 像素并再次变大。基本功能说明：当窗口宽度小于 481px 时，图像将被强制设置为大于其父级并等于窗口宽度的宽度。你不能用 CSS 做到这一点。 （如果可以，请告诉我！）这应该可以在移动设备上提供一个很好的视图。为了进一步“美化”图像，当屏幕在 0 到 480px 之间时，原始边框会被移除，这是通过媒体查询完成的。

所有这一切都很好，直到...... 一个狂野的滚动条出现！发生的情况是 jQuery 只考虑“窗口”，而媒体查询还计算滚动条宽度生成的像素。

其实这是很合乎逻辑的。 $(*window*).width() 和 @media *screen* 但这非常令人沮丧。处理这个问题的最佳方法是什么？在 jQuery 中编写一个自定义函数，归结为“如果滚动条：将 x 像素添加到“如果窗口宽度”-函数”，其中 x 是特定操作系统中滚动条的宽度。或者我们应该尝试用 CSS 绕过这个，或者只是不交替使用 jQuery 和 CSS？

我并不仅仅关注这个问题，而是关注$(window).width() 和media queries 之间的区别。就我而言，我实际上可以将 border: 0 none 添加到 jQuery 中，仅此而已。但不幸的是，这并不总是可能的。最好不使用插件！

Answer 1

我认为Enquire.js 可以解决这个问题。它允许您将 JS 函数绑定到“媒体查询匹配和不匹配事件”。

使用这个库，您可以在媒体查询生效时触发imgSize();，这样就无需在imgSize(); 中使用jQuery 检查$(window).width()。

如果你不想使用插件，you could do it this way（复制代码，未经测试）：

var mql = window.matchMedia("(min-width: 480px)");

mql.addListener(handleMediaChange);
handleMediaChange(mql);

var handleMediaChange = function (mediaQueryList) {
    if (mediaQueryList.matches) {
        // The browser window is at least 480px wide
    }
    else {
        // The browser window is less than 480px wide
    }
}

我认为无论如何将您的函数绑定到媒体查询匹配事件是一个好主意，而不是尝试对齐两种不同的获取屏幕宽度的方式。我很确定滚动条的宽度在不同浏览器中是不一样的，所以用它计算不会是一个跨浏览器的解决方案。