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 媒体查询难道不应该自行检测方向变化并应用适当的 CSS 吗？

- Arnav Sengupta

---

尝试使用min-width而不是min-device-width，以查看是否仍然无效。 - rockStar

min-width生效了！在实际设备上，也就是在Chrome设备模拟器中，由于某些原因它并没有生效。 - Arnav Sengupta

有时候模拟器无法显示依赖项，因此我们需要在实际设备上进行测试。我认为你需要调整你的模拟器，使其也能在实际设备上运行。尝试搜索一下，这会有所帮助 xD - rockStar

即使媒体查询本身是正确的，iOS上的Cordova / PhoneGap应用程序仍然可能需要一些JavaScript来实际处理方向变化以横向显示并因此到达CSS。请参见https://dev59.com/nGgu5IYBdhLWcg3w5K9a...这花费了我相当长的时间才找到。 - Scott Lawton

@rockstar - 你应该把你的评论作为答案添加，因为这对我也有帮助。在方向更改上，“min-width”而不是“min-device-width”可以正确地使用我的媒体查询。 - GJSmith3rd

Answer 1

抱歉最近我忙于学习，所以这些日子没能在这里查看东西。根据请求，

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

原因在于这里。

- rockStar

Answer 2

我也遇到了这个问题，我为纵向和横向各设置了一个特定的媒体查询，第一次从纵向切换到横向时可以正常切换，但是当你返回时它没有更新。

@rockStar应该得到答案的荣誉，但对我来说，使用min-width而不是min-device-width也起到了作用。

- g_blott

Answer 3

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

- sabitha sharma