移动方向改变不适用CSS

Question

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

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

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

如果我在landscape模式下加载页面,则应用正确的CSS.

当我改为时portrait,CSS也是正确的.

但如果我回去landscape,portraitcss类仍在应用.

我正在使用这些元标记

<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

我的问题与 CSS 请求的顺序有关。

'min-device-width'我曾经在其余部分之前定义过。

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

但如果我最后定义它，它就会起作用。

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

有关设备宽度的更多信息：-查看此问题