2

I am building a mobile application using Cordova and Intel app framework. I try to set the orientation to portrait mode

var onDeviceReady = function () {        
    intel.xdk.device.setRotateOrientation('portrait');
    intel.xdk.device.setAutoRotate(false);
    intel.xdk.device.hideSplashScreen();

};
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);`

But when I check the build by installing the APK in Android 4.4, it doesnt work. It always rotate in both modes. Any suggestions?

Raji
  • 845
  • 1
  • 14
  • 22

4 Answers4

6

If you are using Cordova/PhoneGap you need to change the Orientation to "portrait" (normally it is "default") in the config.xml file in the app folder or www folder. <preference name="Orientation" value="portrait" />

The PhoneGap developer app does not reflect this change so you can test by building the app and running it.

3

Add this to your config.xml:

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

this works for all devices.

Sithys
  • 3,655
  • 8
  • 32
  • 67
1

Well, I asked almost the same question and tried everything I could find, even the answers from this question but it didn't work for me, I found a way though :

I ended up using this (GitHub link) plugin.

The plugin is called cordova-yoik-screenorientation and all you need to do is:

Download the GitHub archive.

Copy the plugin.xml and src folder to your root file.

Copy screenorientation.android.js, screenorientation.bb10.js, screenorientation.ios.js and screenorientation.js to your www folder.

Add the following into your index.html head:

<script>
   screen.lockOrientation('landscape');
</script>

...you can change landscape to portrait if you want.

Alin
  • 1,218
  • 5
  • 21
  • 47
0

this style works!

    <style>
        /* Landscape layout (with min-width) */
        @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
            .app {
                background-position:left center;
                padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
                margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                              /* offset horizontal: half of image width and text area width */
            }
        }
    </style>