CSS媒体查询未检测到方向变化答案

【问题标题】：CSS media query not detecting orientation changeCSS媒体查询未检测到方向变化
【发布时间】：2014-02-25 18:46:44
【问题描述】：

我正在使用 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 媒体查询不应该自己检测方向的变化并应用适当的 CSS 吗？

【问题讨论】：

尝试min-width而不是min-device-width来检查这是否也不起作用。
最小宽度有效！在实际设备上，即在 chrome 设备仿真中，由于某种原因它无法正常工作。
有时存在模拟器无法显示的依赖关系，因此我们需要在实际设备中对其进行测试。我认为你需要调整你的模拟器才能让它在那里工作。尝试搜索它会有所帮助xD
即使媒体查询本身是正确的，iOS 上的 Cordova / PhoneGap 应用程序仍可能需要一些 JavaScript 来实际处理方向更改为横向，从而获取 CSS。请参阅stackoverflow.com/questions/10999435/… ... 我花了很长时间才找到。
@rockstar - 您应该添加您的评论作为答案，因为这对我也有帮助。 “min-width”而不是“min-device-width”在方向改变时正确地为我的媒体查询提供服务。

标签： css cordova orientation media-queries

【解决方案1】：

我也遇到了这个问题，我会有一个针对纵向横向的特定媒体查询和另一个针对横向的媒体查询，它会在第一次从纵向切换到横向时很好，但是当您返回时它没有更新.

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

【讨论】：

【解决方案2】：

对不起，我最近忙于学习，所以我这几天无法检查这里的东西，应要求，

使用min-width 比使用min-device-width 更好

原因在here.

【讨论】：

【解决方案3】：

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

【讨论】：