css - 不应用 CSS 的移动方向更改

Question

我正在测试我正在开发并使用媒体查询的网站。

当我在浏览器中测试和调整页面大小时，一切都很好。

但是当我在移动设备上测试时，当我改变手机的方向时遇到了问题。

如果我以 landscape 模式加载页面，则会应用正确的 CSS。

当我更改为 portrait 时，CSS 也是正确的。

但如果我回到landscape，portrait css classes 仍在应用。

我正在使用这些元标记

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

在我的媒体查询中我有

@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... } 

我已经提醒设备宽度以确保它没问题，在landscape模式下它是598px宽，portrait是384px

我使用的是 Nexus 4 (Android 4.3)

为什么我改变方向后 CSS 没有应用？

编辑: 如果我以 portrait 加载网站然后更改为 landscape，则不会应用 CSS。 就好像一旦达到最小分辨率，就再也回不去了。

Answer 1

在我的 Nexus 4 上，我有一个看起来像这样的东西，似乎适用于您的测试用例:

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>

并且我没有在媒体查询中提及方向，例如:

@media only screen and (max-width: 610px) { /* Some CSS here */ }

编辑:就媒体查询而言，看起来您必须将 max-device-width 放在其他 max-width 内容之后。在下面的评论中引用 vyx.ca...

Just found my problem. Notice how I define 'max-device-width' before the rest. If I put that condition last, it works. 'max-device-width' is used for retina display.