¿Cómo restringir la aplicación al modo vertical solo en iónico para todas las plataformas?

121

Estoy trabajando en Ionic / Cordova, agregué esto, androidManifest.xmlpero esto no funcionó para mí y la aplicación todavía se muestra en ambos sentidos

android:screenOrientation="portrait"

¿Cómo puedo restringir mi aplicación al modo vertical únicamente? He comprobado en Android y no funciona

Muhammad Faizan Khan
fuente
¿Funciona para iónico?, porque funciona para iónico 2
Manish Kumar

Respuestas:

315

Si desea restringir el modo vertical solo en todos los dispositivos, debe agregar esta línea al config.xml en la carpeta raíz de su proyecto.

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

Después de eso, reconstruya la plataforma escribiendo el siguiente texto en la línea de comando:

ionic build
Vadiem Janssens
fuente
2
es bueno verlo. trabajó para mi. comprobado en android. gracias Vadiem
Muhammad Faizan Khan
1
¿Cómo se restringe una sola pantalla específica?
user3607282
1
No lo he probado yo mismo, pero puede obtener el resultado deseado con este tutorial: gajotres.net/…
Vadiem Janssens
4
Esto solo parece funcionar cuando lo ejecuta en un dispositivo real por cierto. Si lo ejecuta a través de la aplicación en la nube Ionic View, no tiene ningún efecto.
Johncl
1
Ok para Ionic 4.
Pierrick Martellière
36

Actualización Ionic v2 +

Para las versiones 2 de Ionic y posteriores, también deberá instalar el paquete Ionic Native correspondiente para cualquier complemento que utilice, incluidos los complementos cordova-plugin-y phonegap-plugin-.

  1. Instalar el complemento nativo de Ionic

    Instale el módulo TypeScript de Ionic Native para el complemento desde la CLI .

    $ ionic cordova plugin add --save cordova-plugin-screen-orientation
    $ npm install --save @ionic-native/screen-orientation
    

    * Tenga en cuenta que el --savecomando es opcional y se puede omitir si no desea agregar el complemento a su package.jsonarchivo

  2. Importar ScreenOrientationcomplemento

    Importe el complemento a su controller, más detalles disponibles en la documentación .

    import { ScreenOrientation } from '@ionic-native/screen-orientation';
    
    @Component({
        templateUrl: 'app.html',
        providers: [
            ScreenOrientation
        ]
    })
    
    constructor(private screenOrientation: ScreenOrientation) {
      // Your code here...
    }
    
  3. Haz tus cosas

    Bloquea y desbloquea la orientación de la pantalla mediante programación.

    // Set orientation to portrait
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
    
    // Disable orientation lock
    this.screenOrientation.unlock();
    
  4. Puntos extra

    También puede obtener la orientación actual.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    
Tyler
fuente
1
NOTA: necesita "@ ionic-native / core": "^ 3.6.1", porque la versión inferior provoca un error: forum.ionicframework.com/t/…
Luckylooke
Intente agregar ScreenOrientation a la lista de proveedores
Tyler
3
ionic pluginya no parece funcionar. Creo que es ahora ionic cordova plugin. Tales comoionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33
2
agregar <preference name="Orientation" value="portrait" />parece ser suficiente para mí
tobbe
2
DevApp solo ejecuta su aplicación como una vista web dentro de la aplicación DevApp, por lo que algunas funciones nativas no funcionan. Intente compilar y ejecutar su aplicación directamente en el dispositivo y debería funcionar.
Tyler
13

Según https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences ,

La orientación le permite bloquear la orientación y evitar que la interfaz gire en respuesta a los cambios de orientación. Los valores posibles son predeterminado, horizontal o vertical. Ejemplo:

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

Tenga en cuenta que estos valores distinguen entre mayúsculas y minúsculas, es "Orientación", no "orientación".

Michael Zhou
fuente
1
Cuando se desplaza hacia arriba en el enlace que proporcionó, indica lo siguiente: "La etiqueta <preference> establece varias opciones como pares de atributos de nombre / valor. El nombre de cada preferencia no distingue entre mayúsculas y minúsculas . [...]".
Vadiem Janssens
2
la "orientación" funciona para mí. "Orientación" me da una pantalla en blanco cuando ejecuto la aplicación en el dispositivo real.
CMA
2
La "orientación" me funciona con Ionic 2 en un dispositivo Android.
kamayd
6

Si desea hacer algo en su orientación, significa que desea realizar cualquier acción cuando cambie la orientación de su aplicación, entonces debe usar el complemento de marco iónico ... https://ionicframework.com/docs/native/screen-orientation/

Si solo desea restringir su aplicación en modo vertical u horizontal, solo debe agregar la siguiente línea en su config.xml

<preference name="orientation" value="portrait" />
                 OR
<preference name="orientation" value="landscape" />
Vivek Singh
fuente
4

Primero, debe agregar el complemento de orientación de pantalla Cordova usando

cordova plugin add cordova-plugin-screen-orientation

y luego agregar screen.lockOrientation('portrait');al .run()método

angular.module('myApp', [])
.run(function($ionicPlatform) {

    screen.lockOrientation('portrait');
    console.log('Orientation is ' + screen.orientation);

});
})
Ahmed Bouchefra
fuente
2

Dentro de su angular, app.jsagregue la línea screen.lockOrientation('portrait');como se muestra a continuación:

un

angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
    // LOCK ORIENTATION TO PORTRAIT.
    screen.lockOrientation('portrait');
  });
})

También tendrá otro código en la .runfunción, pero el que le interesa es la línea que escribí. No he agregado la línea <preference name="orientation" value="portrait" />en mi código, pero es posible que deba agregar elcordova-plugin-device-orientation

Vlasis Perdikidis
fuente
2

Agregue android:screenOrientation="portrait"el androidManifest.xmlarchivo como un atributo de etiqueta de actividad para Android.

<activity
        android:name="com.example.demo_spinner.MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait" >
</activity>
AyushKatiyar
fuente
1

En config.xml agregue la siguiente línea

<preference name="orientation" value="portrait" />
Omkar Porje
fuente
0

Puedes probar esto: -

Complemento Cordova para establecer / bloquear la orientación de la pantalla de una manera común para iOS, Android, WP8 y Blackberry 10. Este complemento se basa en una versión anterior de la API de orientación de pantalla, por lo que la API no coincide actualmente con la especificación actual.

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

o prueba este código en la configuración xml: -

<preference name="orientation" value="portrait" />
Bal mukund kumar
fuente