我们有一个主要的问题，由于某种原因，Chrome过早地触发了响应式媒体播放器。因此，它不是以1000 px触发，而是以984 px触发。包含任何值的最大宽度/最小宽度都没有区别。这就好像它偏离了大约14到24 px，这取决于只有它才能理解的因素。
也没有冲突的查询可能会导致这个问题（我们在项目中的'新鲜页面'上尝试了它），甚至nuked了主样式表，但问题仍然存在。此外，我们没有通过操纵窗口/文档或主体宽度，边距，缩放/缩放使用JavaScript或CSS做任何时髦的事情。
我们完全被这一个困惑，并已尝试了几天，以修复+检查堆栈溢出等，但迄今为止无济于事。
代码如下：
div {
background: orange;
}
@media only screen and (min-width: 1000px) {
div {
width: 100px;
height: 100px;
background: green;
}
}字符串
一些地方和背景：
- 这工作以前，然而突然我们遇到这个bug.
- 这在Chrome和Brave中发生，但在Edge和Firefox中运行良好。我们已经尝试了其他几台机器和不同版本的Chrome，但问题仍然存在。我们只能猜测可能是项目中引入了导致此问题的某些内容，但我们无法确定是什么。
- 浏览器缩放正确@100%
- Meta标记视口正确就位
- 尝试了“十进制修复”，如1000.0px -但它不工作.
- 开发工具显示窗口大小为1000 px，但Chrome仅在983 px或983 px时触发代码
- 代码在测试文件中工作（使用项目中相同的索引/模板），Chrome 100%正确处理媒体查询
- 使用Bootstrap 4.5.3的React解决方案
- 工作过
有什么想法吗？有没有一种方法可以“重置”Chrome的媒体查询，或者我们遗漏了什么？StackOverflow中其他类似问题的答案似乎不起作用，这让我们认为这可能是一个单独的问题或新的错误？
任何帮助/见解都非常感谢！：）
2条答案
按热度按时间yeotifhr1#
也许你的Meta标签缺少了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在渲染页面时对滚动条宽度的考虑不同。2下一步的方法是交换查询断点以考虑偏移量，或者进行特定于浏览器的查询。
nnsrf1az2#
我有一段时间没有做CSS了，最近我不得不修复一个bug，其中不再执行以下规则：
字符串
我发现，最近viewport的宽度显示为小数点后两位。所以我更新了我的CSS如下：
型
它又工作了。我不知道这是不是故意的，我也没有花太多的精力去检查所有不同设备上的所有不同浏览器，所以带着一粒盐。