Chrome 媒体查询故障：媒体查询过早触发

Question

我们遇到了一个重大问题，即由于某种原因，Chrome 过早地触发了响应式媒体查询。 因此，它不是在 1000 像素处发射，而是在 984 像素左右发射。包含任何值的最大宽度/最小宽度没有区别。就好像它偏离了大约 14 到 24 像素，这取决于它所了解的因素。

也没有可能导致此问题的冲突查询（我们在项目中的“新页面”上进行了尝试），甚至删除了主样式表，但问题仍然存在。此外，我们不会通过使用 Javascript 或 CSS 操作窗口/文档或正文宽度、边距、缩放/缩放来做任何时髦的事情。

我们对此完全感到困惑，并尝试了几天来修复 + 检查 Stackoverflow 等，但到目前为止无济于事。

代码如下：

div {
     background: orange;
}
@media only screen and (min-width: 1000px) {
    div {
        width: 100px;
        height: 100px;
        background: green;
    }
}

一些地方和背景：

• 这在以前有效，但是我们突然遇到了这个错误...
• 在 Chrome 和 Brave 中会发生这种情况，但在 Edge 和 Firefox 中运行良好。我们尝试了其他几台机器和不同版本的 Chrome，但问题仍然存在。我们只能猜测可能是项目中引入了某些东西导致了这种情况，但我们不知道是什么原因。
• 浏览器缩放正确 @ 100%
• 元标记视口已正确放置
• 尝试了像 1000.0px 这样的“十进制修复” - 但它不起作用...
• 开发工具说窗口大小是 1000px，但 Chrome 只在 983px 左右触发代码
• 代码在测试文件中运行（使用与项目中相同的索引/模板），Chrome 100% 正确处理媒体查询
• 使用 Bootstrap 4.5.3 反应解决方案
• 以前工作过

有什么想法吗？ 有没有办法可以“重置”Chrome 的媒体查询或者我们缺少什么？ StackOverflow 中其他类似问题的答案似乎不起作用，这让我们认为这可能是一个单独的问题或新错误？

非常感谢任何帮助/见解！ :)

Answer 1

也许您的元标记缺少具有值的内容属性：width=device-width, initial-scale=1？

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

据我所知，chrome 需要这些属性和值才能与自定义媒体查询正常工作

编辑

在聊天中与@user2381937 讨论并阅读了一些外部资源后： https://inspirnathan.com/posts/2-media-query-inspector-chrome/

https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

我们发现 chrome 和 firefox 在渲染页面时考虑滚动条宽度的方式不同。前进的方向是交换查询断点以解决偏移量或进行特定于浏览器的查询。