最大化浏览器和切换选项卡时，Media Query不会更改CSS

Question

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

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

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

1. 在第一个选项卡中打开页面，并调整浏览器大小以使＆lt;启用了320px媒体查询，
2. 打开新标签页，浏览到facebook.com等网站。
3. 最大化浏览器。
4. 远离第一个标签进行扩展浏览会话。几分钟内不要重新激活第一个选项卡。
5. 激活第一个选项卡，窗口最大化。
6. 此时，视口应全屏显示，但该元素仍应为绿色块。

这意味着仍然应用＆lt; 320媒体查询。如果你打开调试器，你会看到应用的CSS是普通的CSS。这是Chrome的错误吗？

http://imgur.com/a/TIAAi

这是一张显示序列的imgur专辑。

1. 开启，最大化。
2. 缩小视口，启用媒体查询。
3. 最大化，仍在使用媒体查询。
4. 查看CSS，它表示尺寸为300x200，但UI显示为100x100。有些东西坏了。

Answer 1

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

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