cordova / ios媒体查询方向从不报告“横向”

Question

cordova 3.4.0-0.1.3，在模拟器（iOS 7.1 11D167）或物理设备（iOS 7.1.1 11D201）上的行为相同。

我使用了由“ cordova create hello com.example.hello HelloWorld”创建的cordova示例应用程序，并从正文中删除了背景图像样式。 无论以下方向如何，添加以下css都会导致绿色背景：

body {
    /* red */
    background-color:#FF0000;
}

@media screen and (orientation : portrait) {
     body {
        /* green */
        background-color:#00FF00; 
    }
}

@media screen and (orientation : landscape) {
     body {
        /* blue */
        background-color:#0000FF;
    }
}

我想要一种一般测试肖像/风景的方法。 以下工作在ios上，肖像的绿色背景，风景的蓝色背景。

body {
    /* red */
    background-color:#FF0000;
}

@media screen and (max-aspect-ratio: 1/1) {
     body {
        /* green */
        background-color:#00FF00;
    }
}

@media screen and (min-aspect-ratio: 1/1) {
     body {
        /* blue */
        background-color:#0000FF;
    }
}

我的定向查询有问题吗？ 有什么理由不采用长宽比方法？

shouldAutorotateToInterfaceOrientation应该正确返回“ YES”。 我的plist声明该应用程序支持所有方向。

谢谢您的帮助。

Answer 1

我认为您还必须为方向指定一个最小宽度：横向才能正常工作，因为iOS不能正确地检测到这种情况，只需使用简单的技巧并寻找当您更改方向时会改变的设备宽度。

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

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

需要注意的是,工作方式or 。

试试这个，让我知道，是否有帮助:-)

Answer 2

在这个问题上花了很多时间，部分原因是Google并没有带给我最佳答案...我将在这里链接： 为什么设备旋转时我的Cordova / PhoneGap iOS应用程序不旋转？

最简单的解决方案：定义window.shouldRotateToOrientation以针对4个“度”值中的任意一个或全部返回true：0和180纵向，-90和90横向，例如，请参见http://www.williammalone.com/articles/html5-javascript -ios-orientation /用于有用的readDeviceOrientation（尽管它仅在解决基本问题后才起作用）。

在Cordova 5.1.1，iOS 8，iPhone 6上进行了测试。也可以在模拟器中使用。 我想我可以安装最新的PhoneGap只是为了在那里进行验证。