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.
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.
Archived Comments
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.
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. :)
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.
In my testing in the simulator, iPad2 is still locked to portrait.
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.
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.
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.
Bug report: https://issues.apache.org/j...
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 ?
Did you read my solution above?
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 ?
I just tested and it worked for me. On the simulator. I don't have 9.2.1 here on a device to test.
I was able to test on an iPhone w/ 9.2.1 and it worked there too.
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"/>
See https://issues.apache.org/j... for a work-around in Cordova 6 (remember to remove the global Orientation setting to make this work).
Thanks for sharing this.
Worked perfectly thank you very much.
thank you
Thank you! This was exactly what I needed.
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 ?
I believe there is a plugin that lets you read settings - I'd look there.
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.
I searched - but didn't see anything obvious. :(
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...
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
Wow, great tip. Thank you for sharing this!