Disable auto-rotate in Jquery Mobile or PhoneGap

Question

Although cross platform development for mobile devices is so good. There isn\'t a simple option to disable auto-rotate or lock into one orientation i.e. portrait or landscape.

Answer 1

For iOS, edit the PhoneGap.plist file (e.g. in Xcode). Make sure only portrait is set and uncheck autorotate.

On Android, you need to edit AndroidManifest.xml. Add android:screenOrientation="portrait" in the activity.

Answer 2

To complete the answer above.

On iPhone add this to -info.plist:

<dict>
`.....
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
    </array>
..........
</dict>

on Android to AndroidManifest.xml

<activity   ........      android:screenOrientation="portrait">

Answer 3

Cordova allows you to set this in config.xml

Just add this line within the <widget></widget> tags:

<preference name="Orientation" value="portrait" />

You can also use landscape above for the opposite effect.

Source: Apache Cordova DOcumentation - The config.xml File

Answer 4

On PhoneGap you can now specify the application wide orientation in the config.xml file (note that you then won't receive any orientationchange event anymore, so this isn't the right solution if you just want to enable/disable the auto rotation on some pages only)

<preference name="orientation" value="portait" />