最大化浏览器和切换选项卡时，媒体查询不会更改 CSS

Posted 2023-03-06

【中文标题】最大化浏览器和切换选项卡时，媒体查询不会更改 CSS

【英文标题】：Media Query doesn't change CSS when Maximizing Browser and Switching Tabs

【发布时间】：2013-05-17 16:07:02

【问题描述】：

这里有一个简单的媒体查询的 CSS。

http://codepen.io/anon/pen/nuxaw

当我缩小页面以使视口小于 320 时，该框变为绿色。现在，如果我按照这些步骤操作，浏览器将被最大化，但 CSS 仍将处于媒体查询在 320 像素处定义的状态。

在第一个选项卡中打开页面，并调整浏览器大小以启用 打开一个新选项卡，浏览到一个网站，例如 facebook.com。 最大化浏览器。 从第一个选项卡中取出一个扩展的浏览会话。几分钟内不要重新激活第一个选项卡。 在最大化窗口的情况下激活第一个选项卡。 此时，视口应为全屏，但元素仍应为绿色块。

这意味着仍然应用

http://imgur.com/a/TIAAi

这是 imgur 上的一张专辑，其中显示了序列。

已打开，已最大化。 减少视口，启用媒体查询。 已最大化，仍在使用媒体查询。 查看 CSS，它说尺寸是 300x200，但 UI 显示的是 100x100。有东西坏了。

【问题讨论】：

我会说这是正常的，并且与 Chrome 呈现页面的方式有关。由于您在该页面处于非活动状态的情况下调整了浏览器的大小，因此它不会重新呈现您的页面。当您打开检查器时，检查器正在给您正确的反馈，只是渲染没有改变。我会说这不是一个正常的用例，不用担心。

是的，这不是一个正常的用例。普通网站访问者遇到这种情况的机会非常低。

我有一个正在构建响应式的应用程序。它将作为客户的标签整天存在。这个错误是显而易见的。

你在其他浏览器中测试过吗？难道只有 Chrome 有这样的行为吗？

是的，这是 Chrome 特有的。

【参考方案1】：

解决此问题的方法是说服 Chrome 更新页面上的呈现。您可以通过调整大小、最大化或更改 body 标记上的类来实现。我已经更新到 codepen 以使用在选项卡切换期间触发的可见性更改事件来切换正文上的类以强制 Chrome 更新页面呈现。

http://codepen.io/anon/pen/nuxaw

【讨论】：

在我的情况下不起作用:(更改类但媒体查询不适用。实际上即使浏览器调整大小也没有效果。正确的媒体查询仅在调整大小期间对应的断点匹配时适用。