CSS媒体查询未检测到方向更改

Question

我正在使用Cordova制作混合应用程序。

我的css文件中有以下媒体查询

    @media only screen and (min-device-width : 320px) and (orientation: portrait) {
        /*css goes here*/
     }

    @media only screen and (min-device-width : 320px) and (orientation: landscape) {
        /*css goes here*/
    }

和类似的媒体查询纵向和横向的各种设备宽度。

当我在Nexus 4上测试我的应用程序时，它没有检测到方向更改并更改了css，例如，如果我以纵向模式启动应用程序，然后根据设备宽度，它会选择该媒体查询纵向模式下的宽度，但是如果那时我更改手机的方向，它不会检测到新的宽度并应用相应宽度和横向的新css，反之亦然。

我在这里遗漏了什么，是不是CSS Media查询应该自己检测方向的变化并应用适当的CSS？

Answer 1

我也有一个问题，我会有一个特定的媒体查询纵向景观和另一个景观，它会第一次从纵向切换到横向，但当你回去时，它没有更新

@rockStar应该得到答案的功劳，但使用min-width而不是min-device-width对我来说也很有用。

Answer 2

抱歉，我最近一直忙于学习，所以这几天我无法检查周围的事情，根据要求，

使用 $(grid[selection]).appendTo('.places'); 比使用min-width

更好

原因在于here.

Answer 3

尝试使用基于纵向和横向模式的CSS选择器，即您可以在横向模式下使用类并应用css并在纵向模式下删除该类并应用css。所以基本上你可以检查一个类是否存在。