3

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

看看这个小提琴。

重要的 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 做到这一点。（如果可以，请告诉我！）这应该可以在移动设备上提供一个很好的视图。为了进一步“美化”图像，当屏幕在 0 到 480 像素之间时，原始边框会被移除，这是通过媒体查询完成的。

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

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

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

4

1 回答 1

3

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

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

如果你不想使用插件，你可以这样做（复制代码，未经测试）：

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

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

于 2013-09-14T15:44:37.360 回答