Question

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

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

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

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

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

Answer 1

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

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

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

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

使@media max-width的行为与$（window）.width相同

1 个答案: