Android 浏览器媒体查询在旋转时中断答案

【问题标题】：Android browser media queries break on rotationAndroid 浏览器媒体查询在旋转时中断
【发布时间】：2013-12-03 18:17:42
【问题描述】：

关于我正在使用的 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 如何处理 min/max-device-width 选项存在一些问题，或者它们存在冲突。

【问题讨论】：

如果您已经有了答案，请删除该问题或将其发布为答案 :)

标签： css media-queries

【解决方案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%;
  }
}

【讨论】：