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

Posted 2023-03-14

【中文标题】cordova/ios 媒体查询方向从不报告“风景”

【英文标题】：cordova/ios media query orientation never reports "landscape"

【发布时间】：2014-08-31 20:32:07

【问题描述】：

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 声明该应用程序支持所有方向。

感谢您的帮助。

【参考方案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。

试试这个，如果有帮助，请告诉我:-)

【讨论】：

thanx，但这不适用于 ipad。我想要一个适用于所有设备的通用方向测试。最大/最小纵横比似乎有效。我需要对键盘进行更多测试...它会改变纵横比吗？？

组合媒体查询，让它们完全按照您的意愿行事。

【参考方案2】：

在这个问题上花费了相当多的时间，部分原因是谷歌没有引导我找到最佳答案......我将它链接在这里：Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?

最简单的解决方案：定义 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 来验证它......