媒体查询在最大化浏览器和切换标签时不改变CSS

Question

这是一个包含简单媒体查询的CSS代码段。

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

当我缩小页面以至于视口小于320时，方框会变成绿色。现在如果我按以下步骤操作，浏览器会被最大化，但是CSS仍然会保持在320px定义的媒体查询状态下:

1. 在第一个标签打开页面，并将浏览器大小调整到启用< 320px媒体查询的尺寸
2. 打开新标签，浏览一个网站，比如facebook.com。
3. 最大化浏览器。
4. 在第一个标签不活跃的情况下进行一次长时间的浏览会话。
5. 激活最大化的第一个标签。
6. 此时，视口应该是全屏的，但元素仍应该是绿色块。

这意味着<320媒体查询仍然适用。但如果你打开调试器，你会发现应用的CSS是正常的CSS。这是Chrome的一个bug吗？

http://imgur.com/a/TIAAi

这是一个在imgur上展示了序列的相册。

1. 已打开，已最大化。
2. 缩小视口，启用媒体查询。
3. 最大化，仍使用媒体查询。
4. 查看CSS，其中显示尺寸为300x200，但UI显示为100x100。某些东西出错了。

- Rick

---

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

是的，这不是正常的使用情况。普通网站访问者偶然发现这种情况的几率非常低。 - ralph.m

我有一个正在构建响应式的应用程序。它将作为客户端的选项卡整天在线。这个错误立即显现出来。 - Rick

你在其他浏览器中测试过吗？这只是 Chrome 的表现吗？ - Andrey

是的，这是针对Chrome特定的。 - Rick

Answer 1

这个问题的解决方法是说服 Chrome 更新页面渲染。您可以通过调整大小、最大化或更改 body 标签上的类来实现。我已经更新了 CodePen，在标签切换期间使用 visibilitychange 事件来切换 body 上的一个类，以强制 Chrome 更新页面渲染。 http://codepen.io/anon/pen/nuxaw

- Rick

---

在我的情况下没有起作用 :( 类别已经改变，但媒体查询不适用。实际上，即使浏览器调整大小也没有效果。只有在调整大小期间相应的断点匹配时，适当的媒体查询才会应用。 - Andrey