css - Android 浏览器媒体查询在旋转时中断

Question

关于我使用的 CSS 媒体查询，我在使用默认 Android 浏览器的网站上遇到了奇怪的行为。

问题是一切正常，但是当我将设备旋转到横向时，它会拾取并应用 CSS 以适应更宽的屏幕；然而，当我然后旋转回纵向时，仍然应用更宽屏幕的 CSS。如果我旋转我的手机横向，然后回到纵向，然后刷新，再次应用正确的更薄屏幕 CSS。

示例 CSS:

.box {
  width:100%;
}

@media
 screen and (min-width:480px) and (max-width:599px),
 screen and (min-device-width:480px) and (max-device-width:599px)
{
  .box {
    width:33.333%
  }
}

更好地解释问题的图表:

这似乎只发生在默认的 Android 浏览器上，不会发生在其他浏览器上。

媒体查询复杂外观的理由: 它们似乎在所有浏览器中效果最好，我在使用一个“最小宽度”语句时遇到了 IE9 问题。

我还以为我会包括 <meta>我正在使用的标签，它们是:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> 

谁能告诉我是什么导致了这种奇怪的 Android 行为？这是某种错误吗？

感谢阅读。

注意滚动条必须存在才能像这样运行

更新#1

使用以下媒体查询，一切都按预期工作:

.box {
  width:100%;
}

@media screen and (min-width:480px) {
  .box {
    width:33.333%;
  }
}

我假设 Android 处理最小/最大设备宽度选项的方式存在一些问题，或者它们存在冲突。

Answer 1

看来我错误地使用了 min/max-width 和 min/max-device-width 语句(它们相互冲突)，这在 reading the accepted answer to this question on StackOverflow 之后变得很明显.

似乎 min/max-width 指的是目标显示区域的大小，min/max-device-width 指的是整个设备渲染区域(它的屏幕)。

在这种情况下使用的正确 CSS 是:

.box {
  width:100%; 
}

@media screen and (min-width:480px) {
  .box {
    width:33.333%;
  }
}