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

Question

我们有一个主要问题，由于某种原因 Chrome 过早触发响应式媒体查询。所以它不是在 1000px 处触发，而是在 984px 左右触发。包含任何值的最大 width/min 宽度没有区别。就好像它偏离了大约 14 到 24 像素，具体取决于只有它理解的因素。

也没有可能导致此问题的冲突查询（我们在项目中的 'fresh pages' 上进行了尝试）甚至修改了主样式表，但问题仍然存在。此外，我们没有通过使用 Javascript 或 CSS.

来操纵 window/document 或正文宽度、边距、scale/zoom 来做任何时髦的事情

我们完全被这个问题弄糊涂了，已经尝试了几天来修复 + 检查 Whosebug 等，但到目前为止无济于事。

代码如下：

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

一些事情的发生和背景：

这以前有效，但是突然间我们遇到了这个错误...
它在 Chrome 和 Brave 中发生，但在 Edge 和 Firefox 中运行良好。我们已经尝试了其他几台机器和不同版本的 Chrome，但问题仍然存在。我们只能猜测可能是项目中引入了某些东西导致了这种情况，但我们不知道是什么。
浏览器缩放正确 @ 100%
元标记视口已正确放置
试过 'decimal fix' 像 1000.0px - 但它不起作用...
开发工具显示 window 大小为 1000px，但 Chrome 仅在 983px 左右触发代码
代码在测试文件中工作（与项目中的 index/template 相同）并且 Chrome 100% 正确处理媒体查询
反应解决方案 Bootstrap 4.5.3
之前工作过

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

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

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 在渲染页面时考虑滚动条宽度的方式不同。前进的方向是交换查询断点以解决偏移量或进行特定于浏览器的查询。

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

Chrome Media Query Glitch: Media Query firing too early

css

google-chrome

media-queries

编辑