How to restrict app to portrait mode only in ionic

2019-03-08 02:29发布

I'm working on Ionic/Cordova, I added this to androidManifest.xml but this didn't work for me and app is still showing in both ways

android:screenOrientation="portrait"

How can I restrict my app to portrait mode only? I have checked on android and it doesn't work

8条回答
手持菜刀,她持情操
2楼-- · 2019-03-08 03:32

Ionic v2+ Update

For Ionic versions 2 and later, you will need to also install the corresponding Ionic Native package for any plugin you use, including cordova-plugin- and phonegap-plugin- plugins.

  1. Install Ionic Native Plugin

    Install Ionic Native's TypeScript module for the plugin from the CLI.

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

    * Note that the --save command is optional and can be omitted if you do not wish to add the plugin to your package.json file

  2. Import ScreenOrientation Plugin

    Import plugin into your controller, more details available in the documentation.

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

    Lock and unlock the screen orientation programatically.

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

    You can also get the current orientation.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    
查看更多
虎瘦雄心在
3楼-- · 2019-03-08 03:34

If you want to restrict to portrait mode only on all devices you should add this line to the config.xml in your projects root folder.

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

After that, please rebuild the platform by typing below text in command line:

ionic build
查看更多
登录 后发表回答