Come limitare l'app alla modalità verticale solo in ionic per tutte le piattaforme?


121

Sto lavorando su Ionic / Cordova, l'ho aggiunto a androidManifest.xmlma non ha funzionato per me e l'app viene ancora visualizzata in entrambi i modi

android:screenOrientation="portrait"

Come posso limitare la mia app solo alla modalità verticale? Ho controllato su Android e non funziona


funziona per ionico ??, perché funziona per ionico 2
manish kumar

Risposte:


315

Se vuoi limitare la modalità verticale solo su tutti i dispositivi, dovresti aggiungere questa riga a config.xml nella cartella principale del tuo progetto.

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

Dopodiché, ricostruisci la piattaforma digitando il testo sottostante nella riga di comando:

ionic build

2
bello da vedere. ha funzionato per me. controllato su Android. grazie Vadiem
Muhammad Faizan Khan

1
come si restringe un solo schermo specifico?
user3607282

1
Non l'ho testato da solo, ma potresti ottenere il risultato desiderato con questo tutorial: gajotres.net/…
Vadiem Janssens

4
Questo sembra funzionare solo quando lo esegui su un dispositivo reale tra l'altro. Se lo esegui tramite l'app cloud Ionic View, non ha alcun effetto.
Johncl

1
Ok per Ionic 4.
Pierrick Martellière

36

Ionic v2 + aggiornamento

Per le versioni di Ionic 2 e successive, dovrai installare anche il pacchetto Ionic Native corrispondente per qualsiasi plug-in che utilizzi, inclusi i plug-in cordova-plugin-e phonegap-plugin-.

  1. Installa Ionic Native Plugin

    Installa il modulo TypeScript di Ionic Native per il plug-in dalla CLI .

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

    * Nota che il --savecomando è opzionale e può essere omesso se non desideri aggiungere il plugin al tuo package.jsonfile

  2. Importa ScreenOrientationplugin

    Importa il plugin nel tuo controller, maggiori dettagli disponibili nella documentazione .

    import { ScreenOrientation } from '@ionic-native/screen-orientation';
    
    @Component({
        templateUrl: 'app.html',
        providers: [
            ScreenOrientation
        ]
    })
    
    constructor(private screenOrientation: ScreenOrientation) {
      // Your code here...
    }
    
  3. Fare ciò che sai fare

    Blocca e sblocca l'orientamento dello schermo in modo programmatico.

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

    Puoi anche ottenere l'orientamento corrente.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    

1
NOTA: è necessario "@ ionic-native / core": "^ 3.6.1", perché la versione inferiore causa un errore: forum.ionicframework.com/t/…
Luckylooke

Prova ad aggiungere ScreenOrientation all'elenco dei provider
Tyler

3
ionic pluginnon sembra più funzionare. Penso che sia adesso ionic cordova plugin. Comeionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33

2
l'aggiunta <preference name="Orientation" value="portrait" />sembra essere sufficiente per me
tobbe il

2
DevApp sta solo eseguendo la tua app come visualizzazione web all'interno dell'app DevApp, quindi alcune funzionalità native non funzionano. Prova a compilare ed eseguire la tua app direttamente sul dispositivo e dovrebbe funzionare.
Tyler

13

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

L'orientamento consente di bloccare l'orientamento e impedire la rotazione dell'interfaccia in risposta ai cambiamenti di orientamento. I valori possibili sono default, landscape o portrait. Esempio:

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

Tieni presente che questi valori fanno distinzione tra maiuscole e minuscole, è "Orientamento", non "orientamento".


1
Quando si scorre verso l'alto il collegamento fornito, viene indicato quanto segue: "Il tag <preference> imposta varie opzioni come coppie di attributi nome / valore. Il nome di ciascuna preferenza non fa distinzione tra maiuscole e minuscole . [...]."
Vadiem Janssens

2
"orientamento" funziona per me. "Orientamento" mostra una schermata bianca quando si esegue l'app sul dispositivo effettivo.
CMA

2
"orientamento" funziona per me con Ionic 2 in un dispositivo Android.
Kamayd

6

Se vuoi fare qualcosa sul tuo orientamento significa che vuoi eseguire qualsiasi azione quando cambi l'orientamento della tua app, allora devi usare il plugin del framework ionico ... https://ionicframework.com/docs/native/screen-orientation/

Se vuoi solo limitare la tua app in modalità verticale o orizzontale, devi semplicemente aggiungere queste seguenti righe nel tuo config.xml

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

4

Innanzitutto, è necessario aggiungere il plug-in di orientamento dello schermo di Cordova utilizzando

cordova plugin add cordova-plugin-screen-orientation

e poi aggiungi screen.lockOrientation('portrait');al .run()metodo

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

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

});
})

2

All'interno del tuo angolare app.jsaggiungi la linea screen.lockOrientation('portrait');come mostrato di seguito:

un

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

Avrai anche altro codice nella .runfunzione, ma quello che ti interessa è la riga che ho scritto. Non ho aggiunto la riga <preference name="orientation" value="portrait" />nel mio codice, ma potrebbe essere necessario aggiungere il filecordova-plugin-device-orientation


2

Aggiungi android:screenOrientation="portrait"nel androidManifest.xmlfile come attributo del tag attività per Android.

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

1

In config.xml aggiungi la seguente riga

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

0

Puoi provare questo: -

Plugin Cordova per impostare / bloccare l'orientamento dello schermo in un modo comune per iOS, Android, WP8 e Blackberry 10. Questo plugin è basato su una versione precedente dell'API Screen Orientation, quindi l'API non corrisponde attualmente alle specifiche correnti.

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

o prova questo codice in xml config: -

<preference name="orientation" value="portrait" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.