FF中的媒体查询问题和响应式视图工具

Question

我遇到媒体查询问题。我在Firefox中使用响应式视图工具以480px查看我的网站。但它似乎是以430px而不是480px发射。我不知道为什么。

/*
 *  Gird layout for devices above 480px.
 */
@media screen and (min-width: 480px) {
html {
    background: red;
}
}

我没有其他代码或媒体查询，所以我想知道这是否是某种类型的错误。

屏幕截图：

Answer 1

你不会相信这一点，而且我发布这个错误，任何人都碰巧遇到同样的问题。

在某些时候，我使用（CMD和 - 在Mac上）使我的浏览器文本更小。它打破了正确的宽度，但因为我的字体尺寸较小，它让我失望。它实际上是在正确的位置打破，但响应式查看器没有根据我的字体大小显示宽度。

Answer 2

如果在将响应工具设置为480后检查html元素的计算witdh，则会得到值465.在overflow: hidden;元素上设置html然后再次检查你得到480。

在计算视口宽度时，Firefox会考虑滚动条的宽度，而不是滚动条覆盖滚动条的Chrome。

Answer 3

检查缩放，如果放大，宽度将关闭。 ctrl + 0将缩放重置为默认值100％