javascript - 使@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();
});

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

所有这一切都很好，直到……出现一个乱七八糟的滚动条!发生的情况是 jQuery 仅考虑“窗口”，而媒体查询还计算由滚动条宽度生成的像素。

其实，这是很合乎逻辑的。 $(*window*).width() 和 @media *screen* 但它非常令人沮丧。处理此问题的最佳方法是什么？在 jQuery 中编写一个自定义函数，归结为“if scrollbar: add x pixels to the "if window width"-function”，其中 x 是特定操作系统中滚动条的宽度。或者我们应该尝试使用 CSS 绕过它，还是不交替使用 jQuery 和 CSS？

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

Answer 1

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

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

如果您不想使用插件，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
    }
}

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