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

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

看一眼这把小提琴 http://jsfiddle.net/PdgKB/.

重要的 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() and @media *screen*但这太令人沮丧了。处理这个问题的最佳方法是什么？在 jQuery 中编写一个自定义函数，该函数归结为“如果滚动条：将 x 像素添加到“如果窗口宽度”函数”，其中x是特定操作系统中滚动条的宽度。或者我们应该尝试用 CSS 绕过这个问题，或者只是不交替使用 jQuery 和 CSS？

我不仅仅关注这个问题，而是关注两者之间的区别$(window).width() and media queries一般来说。就我而言，我实际上可以添加border: 0 none到 jQuery 就这样了。但不幸的是这并不总是可能的。最好不使用插件！

I think 查询.js http://wicky.nillia.ms/enquire.js/可以解决这个问题。它允许您将 JS 函数绑定到“媒体查询匹配和不匹配事件”。

使用这个库你可以开火imgSize();当媒体查询生效时，就不再需要$(window).width()在里面使用 jQuery 检查imgSize();.

如果您不想使用插件，你可以这样做 http://tylergaw.com/articles/reacting-to-media-queries-in-javascript（复制代码，未经测试）：

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
    }
}

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