Cordova lock orientation on iPad fails

Question

I'm using cordova 3.5.0-0.2.6 (the last stable version). I'm having problems with locking the orientation for iPad devices. On iPhone it is working properly, but on the iPad the orientation is not locked.

I would like to lock the whole app and not just pages.

This is my current config.xml:

<?xml version="1.0" encoding="utf-8"?>
<widget id="com.domain"
        version="version"
        xmlns="http://www.w3.org/ns/widgets">
    <name>xxx</name>

    <description>Lorem ipsum</description>

    <access origin="*"/>

    <author email="x@x" href="https://x.com">x</author>

    <content src="index.html?platform=cordova"/>

    <feature ...></feature>

    <preference name="permissions" value="none"/>
    <preference name="orientation" value="portrait"/>
    <preference name="show-splash-screen-spinner" value="true"/>
    <preference name="auto-hide-splash-screen" value="true"/>
    <preference name="prerendered-icon" value="true"/>
    <preference name="disallowoverscroll" value="true"/>
    <preference name="webviewbounce" value="false"/>

    <preference name="StatusBarOverlaysWebView" value="false"/>
    <preference name="StatusBarBackgroundColor" value="#000000"/>
</widget>

the generated plist file looks like that:

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations¨ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

Answer 1

I tried lots of workarounds to this bug, but most of them failed. Fortunately, I found one Cordova plugin which enables you to successfully lock the screen orientation through JavaScript. Working on the iPad as well.

https://github.com/yoik/cordova-yoik-screenorientation

1. Add the plugin: cordova plugin add net.yoik.cordova.plugins.screenorientation
2. Lock the screen using screen.lockOrientation('portrait-primary') in JavaScript. Be sure to call this function after the document's deviceready has fired.

Answer 2

A bit of a hack around it, but one way to approach this is via the Cordova hooks. For example, place this in your hooks/before_compile directory:

var fs = require('fs');
var plist = './platforms/ios/YourProjectName/YourProjectName-Info.plist';
fs.exists(plist, function (exists) {
    if (exists) {
        var p = fs.readFileSync(plist, 'utf8');
        p = p.replace(
            /<key>(UISupportedInterfaceOrientations(\~ipad)*)<\/key>[\r\n ]*<array>[\s\S]*?(?=<\/array>)/ig,
            "<key>$1</key>\n\t<array>\n\t\t<string>UIInterfaceOrientationLandscapeLeft</string>\n\t\t<string>UIInterfaceOrientationLandscapeRight</string>\n\t"
        );
        fs.writeFileSync(plist, p, "utf8");
    }
});

When you build for iOS (cordova build ios) it should now alter the plist automatically.