Cordova, iOS, and Orientation - wondering why it is locked?

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Phil posted on 11/9/2015 at 5:42 PM

Thanks for this. I had found a different way of dealing with this with a function called shouldRotateToOrientation at the beginning of my app.js (ionic app). Never saw this particular config.xml entry in any of my searches.

Comment 2 (In reply to #1) by Raymond Camden posted on 11/9/2015 at 6:39 PM

I was considering bringing up that function but felt it was too OT. That was new to me too. Lots of nice little nuggets in the docs. :)

Comment 3 by jcesar posted on 11/10/2015 at 8:05 AM

Default should be portrait on iPhones/iPods an all orientations on iPads (those are default orientations on a native project). Will check on a new empty cordova app.

Comment 4 (In reply to #3) by Raymond Camden posted on 11/10/2015 at 11:11 AM

In my testing in the simulator, iPad2 is still locked to portrait.

Comment 5 (In reply to #4) by jcesar posted on 11/10/2015 at 11:59 AM

yeah, it seems that it broke some time ago https://issues.apache.org/j...

EDIT: Just created a native project and the orientations are:
- iPhone any orientations different from UIInterfaceOrientationPortraitUpsideDown
- iPad, all orientations.

Comment 6 (In reply to #5) by Connor posted on 11/10/2015 at 3:52 PM

There's a bug where the prepare command deletes all orientation values in Info.plist. https://issues.apache.org/j...

When there are no orientation values in the Info.plist, iOS treats it as portrait only. When you create a new project though, Xcode adds those default values to info.plist.

Comment 7 by Raymond Camden posted on 11/10/2015 at 3:56 PM

As a general FYI, if you are using cordova CLI 5.4.0, this feature is now broken. :( I'll post a Jira link when I have it.

Comment 8 (In reply to #7) by Raymond Camden posted on 11/10/2015 at 4:59 PM
Comment 9 by 四維 包 posted on 3/14/2016 at 7:05 AM

hi Raymend
I have the same problem just like the post
for now I am using Cordova Cli-6.0 + Cordova-iOS 4.1.0 + iOS 9.2.1 ipad mini
but still have the same problem,is the problem really solved ?
or...maybe can use Xcode to modify the info.plist manually ?

Comment 10 (In reply to #9) by Raymond Camden posted on 3/14/2016 at 1:28 PM

Did you read my solution above?

Comment 11 (In reply to #10) by 四維 包 posted on 3/14/2016 at 1:38 PM

yes
I use it (above)

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

but still not work
can you help me to try Cordova Cli-6.0 + Cordova-iOS 4.1.0 too ?

Comment 12 (In reply to #11) by Raymond Camden posted on 3/14/2016 at 1:44 PM

I just tested and it worked for me. On the simulator. I don't have 9.2.1 here on a device to test.

Comment 13 (In reply to #11) by Raymond Camden posted on 3/14/2016 at 1:52 PM

I was able to test on an iPhone w/ 9.2.1 and it worked there too.

Comment 14 (In reply to #12) by 四維 包 posted on 3/14/2016 at 2:28 PM

hi Raymond
well...my falt...anyway...for now is good to work in iOS
hope Cordova team one day can just use
<preference name="Orientation" value="default"/>

Comment 15 (In reply to #14) by Ben Crowl posted on 3/29/2016 at 3:09 AM

See https://issues.apache.org/j... for a work-around in Cordova 6 (remember to remove the global Orientation setting to make this work).

Comment 16 (In reply to #15) by Raymond Camden posted on 3/29/2016 at 3:21 PM

Thanks for sharing this.

Comment 17 by Mohessaid posted on 4/30/2016 at 2:49 PM

Worked perfectly thank you very much.

Comment 18 by Jakub Kuchar posted on 7/22/2016 at 7:15 AM

thank you

Comment 19 by t_specht posted on 8/3/2016 at 1:22 PM

Thank you! This was exactly what I needed.

Comment 20 by Freddie Scott posted on 8/17/2016 at 8:33 AM

Hi Raymond,

Thanks for the insights here !

Is it possible to read a value from the device's operating system to understand if the device itself is orientation locked ? And then use that value to force a certain orientation in my cordova app ?

Comment 21 (In reply to #20) by Raymond Camden posted on 8/17/2016 at 1:30 PM

I believe there is a plugin that lets you read settings - I'd look there.

Comment 22 (In reply to #21) by Freddie Scott posted on 8/19/2016 at 11:11 AM

Ok thanks Raymond, if you have a name of the plugin it would be very helpful. I have really searched for something like this but can't find one... yet.

Comment 23 (In reply to #22) by Raymond Camden posted on 8/19/2016 at 12:59 PM

I searched - but didn't see anything obvious. :(

Comment 24 by Ben Wilson posted on 11/14/2016 at 10:40 PM

Thanks for this Raymond - was a big help. For total control, once the iOS orientation has been set to 'all' if you need to change it in code (or even lock / unlock it again) then try https://github.com/apache/c...

Comment 25 by Kev posted on 1/16/2018 at 10:47 AM

This just helped me today however I'd like to point out the gotcha that got me for a while.
If you make any edits to config.xml while running ionic cordova emulate, when you kill the emulate command (ctrl+c), your change is undone. (And config.xml is not included for livereload so has to be stopped and restarted)
So when I found the solution and added the preference to my config, I killed the command and re-ran it but still running portrait. I was just about to search about this phenomenon when at the last time of cancelling I saw my new line disappear in front of my eyes.
Hopefully this will prevent madness setting in for somebody else

Comment 26 (In reply to #25) by Raymond Camden posted on 1/16/2018 at 2:15 PM

Wow, great tip. Thank you for sharing this!