Google Chrome （Windows）：忽略/删除 CSS 媒体查询

Google Chrome (Windows): CSS media queries ignored/removed

提问人：BlueM 提问时间：10/20/2023 更新时间：10/20/2023 访问量：33

问：

一位同事遇到了一个我以前从未遇到过的奇怪问题。他在 Windows 上使用 Chrome，在一个网站上，网站的渲染看起来好像不存在所有基于媒体查询的 CSS 规则。但更好的是，基于 mq 的样式在开发人员工具中甚至不可见：

Styles in dev tools

其他 Chrome 用户（Windows 或 Mac）没有这个问题，而该同事在使用 Firefox 时也没有这个问题。同事的 Chrome 中没有扩展名，我已确保加载的 CSS 文件完全正确。CSS 与网站托管在同一主机上，并通过 Parcel 捆绑。问题发生在我们公司网站的一个子域上，Chrome 正常呈现同一域的其他子域（当然包括媒体查询）。

我完全困惑，不知道可能是什么原因。在网上搜索其他有相同现象的用户，我没有找到任何相关的东西，只有无数常见的媒体查询相关问题......

有什么想法吗？

HTML CSS 谷歌浏览器

评论

2赞 somethinghere 10/20/2023
我从未在媒体查询中看到过，甚至在 MDN 文档中也找不到它，所以也许就是这样？你没有那个功能吗，它能修复它吗？>=max-width
2赞 disinfor 10/20/2023
@somethinghere它位于媒体查询规范 4 中。caniuse.com/css-media-range-syntax。我唯一可以怀疑的是，如果媒体查询没有显示在同事的开发工具中，那就是 Chrome 在某种程度上已经过时了。OP，这可能是一个荒谬的问题，但是您同事的开发工具中是否显示其他网站？media-queries
0赞 BlueM 10/20/2023
@somethinghere：我们明白了，谢谢你的帮助。它确实是 MQ 语法，我们能够使用一个简单的测试页面来追踪它。最新版本中的 Parcel（或者更确切地说是 Parcel 使用的其他依赖项）决定优化 MQ – 使用需要 Chrome ≥ v104 的语法。那位同事有 v103，就像在他的机器上一样，无论出于何种原因，更新都是被禁止的（这显然是出于安全原因的转储想法，而且非常令人惊讶，因为我们使用设备管理）。所以基本上可以归结为：stackoverflow.com/q/76166605/4715679
0赞 BlueM 10/20/2023
@disinfor：也感谢你（SO不允许我在一篇文章中提到两个用户......

答：

0赞 BlueM 10/20/2023 #1

事实证明，这是 Parcel “优化”媒体查询的组合，以及一台禁用了 Chrome 更新的机器，因此是一个相当过时的 Chrome 版本。而且，如果 Chrome 不理解 MQ 语法，它似乎会抑制开发工具中的 CSS 规则。（另请参阅注释。min-widthwidth: >=

上一个：如何在 Chrome 开发者工具中检查原生控件的影子 DOM？

下一个：Chrome 上的网页屏幕呈现问题