我被这个问题困扰,正在处理媒体查询

@media screen and (min-width: 527px) and (max-width: 599px) {
    body {background-color:green}
}

@media only screen and (max-width: 526px) {
    body {background-color:red}
        }


如果我正确理解,则低于526px的任何内容都会显示红色
我也有这个jquery显示浏览器的宽度:

 <script>
        $(window).resize(function () {

            $(window).height();
            $(window).width();
            $(".width-value2").text($(window).width());
        });
    </script>


在页面顶部:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


但是,当宽度根据jQuery达到510px时,它会变绿,应为17px。

jQuery显示的宽度是否错误,如果是,我如何显示正确的宽度。

任何帮助,将不胜感激。

最佳答案

这是因为滚动条(17像素)。

请注意,在chrome浏览器中,一个滚动条宽度,在Firefox中,另一个,在另一个中,等等。

使用mqGenie工具修复此问题。此外,它消除了不同浏览器中滚动条的差异(请阅读说明)。 Demo

或者,如果您不希望mqGenie找到相同的东西。现在您知道问题的原因了。

10-05 21:03
查看更多