javascript - webapp - Cordova iOS cambia la orientación de la pantalla al paisaje en una sola página

webapp phonegap

Question

Tengo una aplicación desarrollada en Cordova 3+ para iPhone. actualmente la aplicación está funcionando bien. También he restringido la vista de paisaje de la aplicación actual, es decir, la visualización de la aplicación solo en vertical.

La aplicación consiste en mucha descripción y una página de informe. Lo que quiero es mostrar todas las páginas en vertical y mostrar la página de informes en Horizontal.

Estoy usando Backbone.js + underscore.js framework.

¿Alguien tiene alguna sugerencia o solución para esto?

¡Gracias por adelantado!

Editar: Lo que quiero es forzar que esa página de informe en particular se muestre en la vista Paisaje. y mostrar todas las otras páginas en retrato.

Editar: Controla de manera programática la orientación de la pantalla en iPhone para cordova 3+

Answer 1

Consulte en este enlace el plugin de orientación.

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

Answer 2

Sin embargo, no pude encontrar ninguna solución. Atlast lo logré usando CSS.

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

De todos modos no es una solución perfecta, pero funciona.

Y puede cambiar programáticamente una sola página al paisaje usando código nativo y llamarlo mediante javascript.

Cree un nuevo archivo js como ScreenOrientation.js e inserte el código siguiente,

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

y agregue el archivo anterior en index.html como se muestra a continuación,

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

Agregue la siguiente función en cualquier archivo js agregado (en mi proyecto he agregado un archivo script.js para agregar funciones comunes),

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

function nativePluginResultHandler (result) {
}

function nativePluginErrorHandler (error) {
}

En config.xml agregue lo siguiente debajo del nombre de la función,

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

En Complementos, agregue (Para cordova <3.0),

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

En los proyectos de Cordova, haga clic con el botón derecho y seleccione un nuevo archivo, luego seleccione Cocoa touch y luego seleccione Object-C Class y haga clic en siguiente, en el nombre de la clase inserte "ScreenOrientation" y en la Subclase de "CDVPlugin" y haga clic en crear.

Ingrese el siguiente en ScreenOrientation.h,

#import <Cordova/CDV.h>

@interface ScreenOrientation : CDVPlugin

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

@end

Ingrese el siguiente en 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

En el proyecto de Cordova, haga clic en buscar y busque "shouldAutoRotate", busque el siguiente y cambie la declaración, de forma predeterminada será "SÍ", cámbielo a "NO".

CDVViewController.m

- (BOOL)shouldAutorotate
{
    return NO;
}

Y en la configuración del proyecto, en Orientaciones del dispositivo, verifique todas las opciones (aunque no es importante),

Project Settings > Device orientation > Tick all 4 options.

y llámalo desde tu proyecto así,

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

Answer 3

Este complemento le permite rotar la pantalla mediante programación en iOS y Android.

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

La rotación de Android tiene fallas visuales, debido al rendimiento (el millaje puede variar según el tamaño del DOM), pero con la rotación, iOS es perfecto.