android - 媒体查询在 Android 上的行为不符合预期

Question

我有 4 个媒体查询。第一个、第三个和第四个工作，但第二个似乎没有激活。

为什么 480x720(第二个媒体查询)默认为第一个媒体查询？

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

预期的结果:

实际发生了什么:

为什么 480x720(第二个媒体查询)默认为第一个媒体查询？

Answer 1

我是 android 和 CSS 的新手。

我在我的 index.html 文件的标题中用一行解决了 android 不给它们真实大小的问题:

<meta name="viewport" content="width=device-width" />

从那时起，我的 CSS 文件就如我所料!