Cordova iOS Change Screen Orientation To Landscape on a Single Page

Question

I have an app developed in Cordova 3+ for iPhone. currently the application is running fine. I have also restricted the Landscape view of the current application, ie the application display only in portrait.

App consists of a lot of description and a report page. What i want is to display all pages in portrait and display the reports page in Landscape.

Iam using Backbone.js + underscore.js framework.

Do anyone have any suggestion or solution for this?

Thanks in advance!

Edit: What i want is to force that particular report page to display in Landscape view. and display all other page in portrait.

Edit: Programatically control screen orientation in iPhone for cordova 3+

Answer 1

However i couldn't find any solutions. Atlast i achieved it using CSS.

-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Chrome, Safari, Opera */
transform:rotate(-90deg); /* Standard syntax */

Anyway it not a perfect solution but it works.

And you can programatically change a single page to landscape using native code and call it via using javascript.

Create a new js file as ScreenOrientation.js and insert the below code,

var ScreenOrientation = {
   //alert(orientation);
callScreenOrientationNative: function(success,fail,orientation) {
   return Cordova.exec( success, fail,
                       "ScreenOrientation",
                       "screenorientationFunction",
                       [orientation]);
}
};

and add the above file in index.html as below,

<script type="text/javascript" src="ScreenOrientation.js"></script>

Add the below function in any added js file(in my project i have added a script.js file to add common functions),

function callScreenOrientation(orientation) {
   ScreenOrientation.callScreenOrientationNative(nativePluginResultHandler,nativePluginErrorHandler,orientation);
}

function nativePluginResultHandler (result) {
}

function nativePluginErrorHandler (error) {
}

In config.xml add the below under feature name,

<!-- Screen Orientation custom plugin to display reports page. -->
   <feature name="ScreenOrientation">
       <param name="ios-package" value="ScreenOrientation"/>
   </feature>

Under Plugins add (For cordova < 3.0),

<plugins>
    <plugin name="ScreenOrientation" value="ScreenOrientation" />
</plugins>

On Cordova projects > Plugins right click and select new file, then from iOS select Cocoa touch then Select objective-C Class and click next, in class name insert "ScreenOrientation" and in Subclass of "CDVPlugin" and click next and click create.

Enter the below in ScreenOrientation.h,

#import <Cordova/CDV.h>

@interface ScreenOrientation : CDVPlugin

- (void) screenorientationFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

Enter the below in ScreenOrientation.m,

#import "ScreenOrientation.h"

@implementation ScreenOrientation

- (void) screenorientationFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options {
   [arguments pop];

   NSString *orientation = [arguments objectAtIndex:0];

   if ( [orientation isEqualToString:@"LandscapeLeft"] ) {
       NSLog(@"Landscape Left");
        [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationLandscapeLeft];
   }
   else if ( [orientation isEqualToString:@"LandscapeRight"] ) {
       NSLog(@"Landscape Right");
       [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationLandscapeRight];
   }
   else if ( [orientation isEqualToString:@"Portrait"] ) {
       NSLog(@"Portrait");
       [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationPortrait];
   }
   else if ( [orientation isEqualToString:@"PortraitUpsideDown"] ) {
       NSLog(@"Portrait upSide Down Left");
       [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationPortraitUpsideDown];
   }
}

@end

In Cordova project click search and search for "shouldAutoRotate and find the below and change the return, by default it will be 'YES' change it to 'NO'.

CDVViewController.m

- (BOOL)shouldAutorotate
{
    return NO;
}

And in project settings, in Device orientations check all options (not important though),

Project Settings > Device orientation > Tick all 4 options.

and call it from your project like this,

callScreenOrientation('LandscapeLeft');
callScreenOrientation('LandscapeRight');
callScreenOrientation('Portrait');
callScreenOrientation('PortraitUpsideDown');

Answer 2

Check out in this link for the orientation plugin.

http://www.web-garden.co.uk/blog/2012/7/29/how-to-control-the-page-orientations-in-your-ios-phonegap-application-part-2

Answer 3

This plugin allows you to programmatically rotate the screen on iOS and Android.

https://github.com/kant2002/cordova-plugin-screen-orientation

Android rotation has visual glitches, due to performance (you mileage could vary depends on DOM size), but on rotation iOS is perfect.

Answer 4

Official Cordova Plugin

According to this issue , even the official Cordova plugin ( cordova-plugin-screen-orientation ) for this has a fail point (that at the moment does not seem fixable). This is probably the route to go for the long-term, though.

Install the plugin and then use this JS:

screen.orientation.lock('landscape');

Or....

CSS Only

You can use CSS to fix this if you combine it with media queries, but it has a big snag, too. It won't affect where keyboards open, and keyboards opening may make the media query change:

Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait. [ MDN docs ]

If this does not matter for you page, you can simply add something like a class named orientation-landscape (or insert with JS if you cannot hard-code it) and then rotate it when the media query says it's portrait.

 @media (orientation: portrait) { .orientation-landscape { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } } @media (orientation: landscape) { .orientation-portrait { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } } /* just to show the change */ .orientation-landscape { background: blue; color: white; padding: 1em; text-align: center; } .orientation-portrait { border: 1px solid green; color: green; padding: 1em; background: lightgrey; text-align: center; } 

 <div class="orientation-portrait"> heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo </div> <div class="orientation-landscape"> heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo </div>