Comment restreindre l'application au mode portrait uniquement en ionique pour toutes les plates-formes?

121

Je travaille sur Ionic / Cordova, j'ai ajouté ceci androidManifest.xmlmais cela n'a pas fonctionné pour moi et l'application s'affiche toujours dans les deux sens

android:screenOrientation="portrait"

Comment puis-je limiter mon application au mode portrait uniquement? J'ai vérifié sur Android et cela ne fonctionne pas

Muhammad Faizan Khan
la source
fonctionne-t-il pour ionic ??, coz son travail pour ionic 2
manish kumar

Réponses:

315

Si vous souhaitez limiter le mode portrait uniquement sur tous les appareils, vous devez ajouter cette ligne au config.xml dans le dossier racine de vos projets.

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

Après cela, veuillez reconstruire la plate-forme en tapant le texte ci-dessous dans la ligne de commande:

ionic build
Vadiem Janssens
la source
2
Bon à voir. travaillé pour moi. vérifié sur Android. merci Vadiem
Muhammad Faizan Khan
1
comment restreindre un seul écran spécifique?
user3607282
1
Je ne l'ai pas testé moi-même, mais vous pouvez obtenir le résultat souhaité avec ce tutoriel: gajotres.net
...
4
Cela ne semble fonctionner que lorsque vous l'exécutez sur un vrai appareil. Si vous l'exécutez via l'application cloud Ionic View, cela n'a aucun effet.
Johncl
1
Ok pour Ionic 4.
Pierrick Martellière
36

Mise à jour Ionic v2 +

Pour les versions ioniques 2 et plus tard, vous devrez également installer le correspondant ionique natif package pour tout vous utilisez plugin de , y compris cordova-plugin-et phonegap-plugin-plugins.

  1. Installer Ionic Native Plugin

    Installez le module TypeScript d'Ionic Native pour le plugin à partir de la CLI .

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

    * Notez que la --savecommande est facultative et peut être omise si vous ne souhaitez pas ajouter le plugin à votre package.jsonfichier

  2. Importer le ScreenOrientationplugin

    Importez le plugin dans votre controller, plus de détails disponibles dans la documentation .

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

    Verrouillez et déverrouillez l'orientation de l'écran par programme.

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

    Vous pouvez également obtenir l'orientation actuelle.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    
Tyler
la source
1
REMARQUE: vous avez besoin de "@ ionic-native / core": "^ 3.6.1", car la version inférieure provoque une erreur: forum.ionicframework.com/t
...
Essayez d'ajouter ScreenOrientation à la liste des fournisseurs
Tyler
3
ionic pluginne semble plus fonctionner. Je pense que c'est maintenant ionic cordova plugin. Tels queionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33
2
l'ajout <preference name="Orientation" value="portrait" />semble me
suffire
2
DevApp exécute simplement votre application en tant que vue Web dans l'application DevApp, de sorte que certaines fonctionnalités natives ne fonctionnent pas. Essayez de compiler et d'exécuter votre application directement sur l'appareil et cela devrait fonctionner.
Tyler
13

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

L'orientation vous permet de verrouiller l'orientation et d'empêcher l'interface de tourner en réponse aux changements d'orientation. Les valeurs possibles sont par défaut, paysage ou portrait. Exemple:

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

Sachez que ces valeurs sont sensibles à la casse, il s'agit de «Orientation» et non d '«orientation».

Michael Zhou
la source
1
Lorsque vous faites défiler le lien que vous avez fourni, il indique ce qui suit: "La balise <preference> définit diverses options sous forme de paires d'attributs nom / valeur. Le nom de chaque préférence est insensible à la casse . [...]."
Vadiem Janssens
2
«orientation» fonctionne pour moi. "Orientation" me donne un écran blanc lors de l'exécution de l'application sur un appareil réel.
CMA
2
"orientation" fonctionne pour moi avec Ionic 2 dans un appareil Android.
kamayd
6

Si vous voulez faire quelque chose sur votre orientation signifie que vous souhaitez effectuer une action lorsque vous modifiez l'orientation de votre application, vous devez utiliser le plugin de framework ionique ... https://ionicframework.com/docs/native/screen-orientation/

Si vous souhaitez simplement restreindre votre application en mode portrait ou paysage, vous devez simplement ajouter ces lignes suivantes dans votre config.xml

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

Tout d'abord, vous devez ajouter le plug-in d'orientation d'écran Cordova en utilisant

cordova plugin add cordova-plugin-screen-orientation

puis ajouter screen.lockOrientation('portrait');à la .run()méthode

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

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

});
})
Ahmed Bouchefra
la source
2

À l'intérieur de votre angulaire, app.jsajoutez la ligne screen.lockOrientation('portrait');comme indiqué ci-dessous:

une

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

Vous aurez également un autre code dans la .runfonction, mais celui qui vous intéresse est la ligne que j'ai écrite. Je n'ai pas ajouté la ligne <preference name="orientation" value="portrait" />dans mon code, mais vous devrez peut-être ajouter lecordova-plugin-device-orientation

Vlasis Perdikidis
la source
2

Veuillez ajouter android:screenOrientation="portrait"le androidManifest.xmlfichier comme attribut de balise d'activité pour Android.

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

Dans config.xml, ajoutez la ligne suivante

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

Vous pouvez essayer ceci: -

Plugin Cordova pour définir / verrouiller l'orientation de l'écran d'une manière courante pour iOS, Android, WP8 et Blackberry 10. Ce plugin est basé sur une première version de l'API Screen Orientation, donc l'API ne correspond pas actuellement aux spécifications actuelles.

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

ou essayez ce code dans la configuration xml: -

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