Android浏览器媒体查询中断轮播

Question

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

问题是一切正常，但是一旦我将设备旋转到横向，它就会拾取并将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浏览器上，它没有其他浏览器。

媒体查询复杂外观的理由： 它们似乎在所有浏览器中都运行得最好，我在使用一个'min-width'语句时遇到了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处理min / max-device-width选项的方式存在一些问题，或者它们存在冲突。

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%;
  }
}