Wie kann ich die App für alle Plattformen nur im ionischen Modus auf den Porträtmodus beschränken?

121

Ich arbeite an Ionic / Cordova, ich habe dies hinzugefügt, androidManifest.xmlaber das hat bei mir nicht funktioniert und die App wird immer noch in beide Richtungen angezeigt

android:screenOrientation="portrait"

Wie kann ich meine App nur auf den Hochformatmodus beschränken? Ich habe auf Android überprüft und es funktioniert nicht

Muhammad Faizan Khan
quelle
funktioniert es für ionic ??, weil es für ionic 2 funktioniert
manish kumar

Antworten:

315

Wenn Sie den Hochformatmodus nur auf allen Geräten einschränken möchten, sollten Sie diese Zeile zur Datei config.xml in Ihrem Projektstammordner hinzufügen.

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

Danach erstellen Sie die Plattform neu, indem Sie den folgenden Text in die Befehlszeile eingeben:

ionic build
Vadiem Janssens
quelle
2
gut zu sehen. arbeitete für mich. auf Android überprüft. danke Vadiem
Muhammad Faizan Khan
1
Wie schränken Sie nur einen bestimmten Bildschirm ein?
user3607282
1
Ich habe dies nicht selbst getestet, aber Sie können das gewünschte Ergebnis mit diesem Tutorial erhalten: gajotres.net/…
Vadiem Janssens
4
Dies scheint nur zu funktionieren, wenn Sie es übrigens auf einem realen Gerät ausführen. Wenn Sie es über die Ionic View-Cloud-App ausführen, hat dies keine Auswirkungen.
Johncl
1
Ok für Ionic 4.
Pierrick Martellière
36

Ionic v2 + Update

Für Ionic-Versionen 2 und höher müssen Sie außerdem das entsprechende Ionic Native- Paket für jedes von Ihnen verwendete Plugin installieren , einschließlich cordova-plugin-und phonegap-plugin-Plugins.

  1. Installieren Sie das Ionic Native Plugin

    Installieren Sie das TypeScript-Modul von Ionic Native für das Plugin über die CLI .

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

    * Beachten Sie, dass der --saveBefehl optional ist und weggelassen werden kann, wenn Sie das Plugin nicht zu Ihrer package.jsonDatei hinzufügen möchten

  2. Import ScreenOrientationPlugin

    Importieren Sie das Plugin in Ihr controller, weitere Details finden Sie in der Dokumentation .

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

    Sperren und entsperren Sie die Bildschirmausrichtung programmgesteuert.

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

    Sie können auch die aktuelle Ausrichtung abrufen.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    
Tyler
quelle
1
HINWEIS: Sie benötigen "@ ionic-native / core": "^ 3.6.1", da eine niedrigere Version einen Fehler verursacht: forum.ionicframework.com/t/…
Luckylooke
Versuchen Sie, ScreenOrientation zur Liste der Anbieter hinzuzufügen
Tyler
3
ionic pluginscheint nicht mehr zu funktionieren. Ich denke es ist jetzt ionic cordova plugin. Wieionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33
2
Hinzufügen <preference name="Orientation" value="portrait" />scheint genug für mich zu sein
tobbe
2
DevApp führt Ihre App nur als Webansicht in der DevApp-App aus, sodass einige native Funktionen nicht funktionieren. Versuchen Sie, Ihre App direkt auf dem Gerät zu kompilieren und auszuführen, und es sollte funktionieren.
Tyler
13

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

Mit der Ausrichtung können Sie die Ausrichtung sperren und verhindern, dass sich die Benutzeroberfläche als Reaktion auf Änderungen der Ausrichtung dreht. Mögliche Werte sind Standard, Querformat oder Hochformat. Beispiel:

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

Beachten Sie, dass bei diesen Werten zwischen Groß- und Kleinschreibung unterschieden wird. Dies ist "Orientierung", nicht "Orientierung".

Michael Zhou
quelle
1
Wenn Sie auf dem von Ihnen angegebenen Link nach oben scrollen, wird Folgendes angegeben: "Das <preference> -Tag legt verschiedene Optionen als Paare von Name / Wert-Attributen fest. Der Name jeder Einstellung unterscheidet nicht zwischen Groß- und Kleinschreibung . [...]."
Vadiem Janssens
2
"Orientierung" funktioniert bei mir. "Orientierung" gibt mir einen weißen Bildschirm, wenn ich die App auf dem tatsächlichen Gerät ausführe.
CMA
2
"Orientierung" funktioniert bei mir mit Ionic 2 in einem Android-Gerät.
Kamayd
6

Wenn Sie etwas an Ihrer Ausrichtung ändern möchten, bedeutet dies, dass Sie beim Ändern Ihrer App-Ausrichtung eine Aktion ausführen möchten. Dann müssen Sie das ionische Framework-Plugin verwenden ... https://ionicframework.com/docs/native/screen-orientation/

Wenn Sie Ihre App nur im Hoch- oder Querformat einschränken möchten, müssen Sie nur die folgende Zeile in Ihre config.xml einfügen

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

Zuerst müssen Sie das Cordova Screen Orientation Plugin mit hinzufügen

cordova plugin add cordova-plugin-screen-orientation

und dann screen.lockOrientation('portrait');zur .run()Methode hinzufügen

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

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

});
})
Ahmed Bouchefra
quelle
2

Fügen Sie innerhalb Ihres app.jsWinkels die Linie screen.lockOrientation('portrait');wie unten gezeigt hinzu:

ein

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

Sie werden auch anderen Code in der .runFunktion haben, aber der, an dem Sie interessiert sind, ist die Zeile, die ich geschrieben habe. Ich habe die Zeile nicht <preference name="orientation" value="portrait" />in meinen Code eingefügt , aber möglicherweise müssen Sie die Zeile hinzufügencordova-plugin-device-orientation

Vlasis Perdikidis
quelle
2

Bitte fügen Sie android:screenOrientation="portrait"in der androidManifest.xmlDatei als Attribut des Aktivitäts-Tags für Android.

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

Fügen Sie in config.xml die folgende Zeile hinzu

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

Sie können dies versuchen: -

Cordova-Plugin zum Festlegen / Sperren der Bildschirmausrichtung auf übliche Weise für iOS, Android, WP8 und Blackberry 10. Dieses Plugin basiert auf einer frühen Version der Bildschirmorientierungs-API, sodass die API derzeit nicht der aktuellen Spezifikation entspricht.

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

oder versuchen Sie diesen Code in der XML-Konfiguration: -

<preference name="orientation" value="portrait" />
Bal Mukund Kumar
quelle