Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Cordova, iOS, and Orientation – Wondering Why it is Locked?

DZone's Guide to

Cordova, iOS, and Orientation – Wondering Why it is Locked?

Is your Cordova app not rotating when you might expect?

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

I’m not sure if this is new behavior, but if it isn’t, I haven’t run into this till last week. I was working on a project with Ionic (Cordova Demo – Apple TV HD Video Viewer) and ran into something odd. When I rotated the device, the orientation did not change. I quickly made a virgin Cordova project to see if I could confirm it there as well – and I did.

Simulator Screen Shot Nov 9, 2015, 10.46.48 AM

I knew that Cordova supports a preference to lock orientation, and I checked my config.xml to ensure there wasn’t a “lock” there. Turns out, I was half-wrong.

If you check the docs (The config.xml File) you’ll discover this little tidbit:

Orientation (string, defaults to  default): allows you to lock orientation and prevent the interface from rotating in response to changes in orientation. Possible values are default, landscape or portrait. Example:

Note the “defaults to default” aspect—that’s crucial.

A bit later in the doc you then see this:

For iOS, to specify both portrait & landscape mode you would use the platform specific value all

So to be clear, for iOS, default is portrait only. For Android, default allows for all orientations. In order for your application to support both (well, all four technically) orientations in iOS, you will want to specifically allow that:

<platform name="ios">
    <preference name="Orientation" value="all" />
</platform>

Note how the preference is wrapped in a platform tag. Don’t forget you can set values just for particular platforms within your config.xml file.

So as always – when I post stuff like this I’m always curious to know if everyone else knew this but me. Let me know in the comments below. Thanks to @riddlerdev in the Ionic Slack for helping me find this last week.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
cordova

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}