我被这个问题困扰,正在处理媒体查询
@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找到相同的东西。现在您知道问题的原因了。