Chrome媒体查询故障:媒体查询过早启动

Question

我们有一个大问题，因为某些原因，Chrome正在过早地启动响应性媒体查询。因此，它不是以1000 it的速度发射，而是发射了984 it。包含任何值的最大宽度/最小宽度没有差别。这就好像它大约是14到24便士，取决于它所理解的因素。

也没有冲突的查询可能导致这种情况(我们在项目中的“新页面”上尝试过)，甚至对主样式表进行了核弹，但问题仍然存在。此外，我们并不是通过使用Javascript或CSS操作窗口/文档或正文宽度、页边距、缩放/缩放来做任何奇怪的事情。

我们对此完全感到困惑，并尝试了几天来修复+检查堆栈溢出等，但到目前为止都没有效果。

代码如下：

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

一些地方和背景：

• 以前是这样做的，但是突然间我们遇到了这个错误.
• --它发生在Chrome和Brave中，但是在边缘和火狐中工作得很好。我们已经尝试过其他几台机器和不同版本的Chrome，但问题依然存在。我们只能猜测，可能是项目引入了导致这种情况的东西，但我们对此感到困惑。
• 浏览器缩放是正确的@ 100%
• Meta标签视图端口已就位--“十进制修正”类似于1000.0px --但它不起作用……
• Dev工具表示窗口大小为1000 as。但是Chrome只在983 at激发代码，或者thereabouts
• Code在测试文件中工作(具有与项目中相同的索引/模板)，并且Chrome处理媒体查询100%的correctly
• React解决方案，引导4.5.3
• 在

之前工作。

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

任何帮助/洞察力都将不胜感激！:)

Answer 1

也许您的元标记缺少了具有值的内容属性:宽度=设备宽度，初始比例尺=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在呈现页面时如何考虑滚动条的宽度不同。前进的方向要么是交换查询断点以说明偏移量，要么是使浏览器特定的查询。