css - 使用媒体查询时出现奇怪的页面

Question

我正在做一个使用媒体查询的页面：

@media
only screen and (max-width: 320px){}

如果页面宽度大小<= 320px（我们称之为小页面），它将加载媒体查询中的css。但是我遇到了一个问题，如果我在 Chrome 中打开一个 tab1，并将浏览器宽度调整为小于 320px，将显示移动样式页面，但是我在新 tab2 中打开一个新页面，然后最大化这个选项卡，稍后（ 5分钟），回到tab1，它仍然加载移动风格。如果我立即返回，tab1 将显示正确的 css 样式。请看截图。

图一是普通页面
图二是小页面加载媒体查询样式
图三是怪异页面，如果最大化另一个标签，过一段时间再回到账户摘要页面，会是这样，预期的结果是显示正常页面

Answer 1

我有同样的问题，但相反。

也许你应该尝试：

仅屏幕和（最小宽度：320 像素）{}

代替

只有屏幕和 (max-width: 320px){} 。