cordova/ios media query orientation never reports “landscape”

Question

cordova 3.4.0-0.1.3, same behavior on either the simulator (iOS 7.1 11D167) or a physical device (iOS 7.1.1 11D201).

I took the cordova sample app created by 'cordova create hello com.example.hello HelloWorld' and removed the background-image styles from body. Adding the following css resulted in a green background no matter what orientation:

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;
    }
}

I wanted a way to generically test for portrait/landscape. The following worked on ios, a green background for portrait, a blue background for landscape.

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;
    }
}

Am I doing something wrong with my orientation queries? Any reason not to go with the aspect ratio approach?

shouldAutorotateToInterfaceOrientation is correctly returning 'YES'. My plist declares that the app supports all orientations.

Thank you for your help.

Answer 1

I think you have to specify a min-width as well for orientation: landscape to work because iOS doesn't detect this the right way, just use a simple trick and look for the device width that will change when you change the orientation.

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

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

Note that the , works as or .

Try this and let me know, if it helped :-)

Answer 2

Having spent quite a bit of time on this issue, in part because Google didn't lead me to the best answer ... I'll link it here: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?

Easiest solution: define window.shouldRotateToOrientation to return true for any or all of the 4 'degree' values: 0 & 180 portrait, -90 & 90 landscape, eg see http://www.williammalone.com/articles/html5-javascript-ios-orientation/ for a useful readDeviceOrientation (though it only works after the basic problem is solved).

Tested on Cordova 5.1.1, iOS 8, iPhone 6. Also works in the simulator. I suppose I could install the latest PhoneGap just to verify it there....