How to restrict app to portrait mode only in ionic for all platforms?

Question

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

is it working for ionic ??, coz its working for ionic 2 – manish kumar Jul 10 '17 at 13:37 — manish kumar, Jul 10 '17 at 13:37

Vadiem Janssens · Accepted Answer · 2016-04-29T08:16:29.587

328

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

edited Apr 29 '16 at 08:16

answered Jan 06 '15 at 08:44

Vadiem Janssens

4,069
1
17
27

2

good to see. worked for me. checked on android. thanks Vadiem – Muhammad Faizan Khan Jan 06 '15 at 11:22
1

how do you restrict just one specific screen? – user3607282 Jul 21 '16 at 10:18
1

I haven't tested this myself, but you may get the desired result with this tutorial: http://www.gajotres.net/changing-locking-screen-orientation-in-ionic-application/ – Vadiem Janssens Jul 25 '16 at 09:46
4

This only seems to work when you run it on a real device btw. If you run it through the Ionic View cloud app it has no effect. – Johncl Dec 01 '16 at 20:51
Note that this answer is for Ionic 1. For Ionic 2, see my answer below: http://stackoverflow.com/a/43748328/3305145 – Tyler May 09 '17 at 21:49
1

Ok for Ionic 4. – Pierrick Martellière Jul 28 '18 at 17:26
1

Can not find config.xml in ionic 4.. can someone please help? – Mitesh Shah Mar 26 '19 at 04:48
Are you using Cordova or Capacitor? – Vadiem Janssens Mar 26 '19 at 10:43
@VadiemJanssens: Cordova. – Mitesh Shah Mar 27 '19 at 02:45
@VadiemJanssens: I can see now after following the steps mentioned in the link. Thank you. – Mitesh Shah Mar 28 '19 at 02:11
i already have this code in my app and its working for most of android devices but its not working for Leo LE2 android mobile. – VISHAL SINGH Jul 26 '19 at 10:29
Great, works too in Quasar framework with Cordova on android – A.W. Mar 07 '20 at 17:18
It's `"Orientation"` not `"orientation"`. – Konrad Gałęzowski Jul 22 '23 at 10:47

score 37 · Answer 2 · edited Oct 29 '17 at 07:33

37

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.

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

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...
}

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();

Bonus Points

You can also get the current orientation.

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

edited Oct 29 '17 at 07:33

Rockin4Life33

2,240
1
31
29

answered May 02 '17 at 22:39

Tyler

3,616
3
22
34

1

NOTE: you need "@ionic-native/core": "^3.6.1", because lower version causes error: https://forum.ionicframework.com/t/ionicnativeplugin-missing-from-ionic-native-core/88019 – Luckylooke Jun 22 '17 at 11:55
Try adding ScreenOrientation to the list of providers – Tyler Aug 07 '17 at 16:49
3

`ionic plugin` no longer seems to work. I think it is now `ionic cordova plugin`. Such as `ionic cordova plugin add --save cordova-plugin-screen-orientation` – Rockin4Life33 Oct 28 '17 at 21:23
2

adding `` seems to be enough for me – tobbe Jan 25 '18 at 12:04
Is it possible that this won't work on the IonicDev App environment? I followed the instructions and the app won't lock the screen orientation. – nicozica Aug 10 '18 at 17:59
2

DevApp is just running your app as a webview within the DevApp app, so some native features do not work. Try compiling and running your app directly on the device and it should work. – Tyler Aug 10 '18 at 21:05

score 14 · Answer 3 · answered Apr 29 '16 at 06:37

14

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

Orientation allows you to lock orientation and prevent the interface from rotating in response to changes in orientation. Possible values are default, landscape, or portrait. Example:

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

Be aware that these values are case sensitive, it is "Orientation", not "orientation".

answered Apr 29 '16 at 06:37

Michael Zhou

151
1
4

1

When you scroll up on the link you provided, it states the following: "The tag sets various options as pairs of name/value attributes. Each preference's name is *case-insensitive*. [...]." – Vadiem Janssens Apr 29 '16 at 08:15
2

"orientation" works for me. "Orientation" gives me white screen when running the app on actual device. – CMA Jul 22 '16 at 10:59
2

"orientation" works for me with Ionic 2 in an android device. – kamayd Oct 05 '16 at 23:11

score 6 · Answer 4 · answered Jan 17 '18 at 18:38

If you want to do something on your orientation means you want to perform any action when change your app orientation then you have to use ionic framework plugin... https://ionicframework.com/docs/native/screen-orientation/

If you just want to restrict your app on portrait or landscape mode then you have to just add these following line in your config.xml

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

AyushKatiyar · Answer 5 · 2019-08-09T10:29:09.540

6

Please add android:screenOrientation="portrait" in the androidManifest.xml file as an attribute of activity tag for android.

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

edited Aug 09 '19 at 10:29

answered Aug 08 '19 at 12:52

AyushKatiyar

1,000
8
15

This is the updated answer as per the [docs](https://capacitorjs.com/docs/guides/screen-orientation) -2023 April. – Muhammed Rahif Apr 05 '23 at 02:51

score 4 · Answer 6 · edited Feb 13 '17 at 09:18

4

First, you need to add the Cordova Screen Orientation Plugin using

cordova plugin add cordova-plugin-screen-orientation

and then add screen.lockOrientation('portrait'); to .run() method

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

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

});
})

edited Feb 13 '17 at 09:18

Devid Farinelli

7,514
9
42
73

answered Nov 04 '16 at 20:58

Ahmed Bouchefra

256
2
4

score 2 · Answer 7 · edited Feb 13 '17 at 09:17

Inside your angular app.js add the line screen.lockOrientation('portrait'); like shown bellow:

an

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

You will also have other code in the .run function, but the one you are interested in is the line I wrote. I haven't added the line <preference name="orientation" value="portrait" /> in my code, but you may need to add the cordova-plugin-device-orientation

score 1 · Answer 8 · answered Jan 17 '18 at 18:52

1

In config.xml add the following line

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

answered Jan 17 '18 at 18:52

Omkar Porje

278
1
5

score 1 · Answer 9 · answered Jul 26 '23 at 20:03

1

Using ionic 7:

If you only want to lock orientation and won't use it for dynamic functionality in your app. You don't need to install any package but just to update the configuration.

On iOS

in Info.plist file edit value on key UISupportedInterfaceOrientations and leave only UIInterfaceOrientationPortrait. Like that:

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

On Android

In AndroidManifest.xml update activity tag and add:

  android:screenOrientation="portrait"

answered Jul 26 '23 at 20:03

stanimirsp

2,548
2
26
36

Hey @stanimirsp, do you know why using this approach for iOS I get this error? At least on Ionic 5: `The "UIInterfaceOrientationPortrait,UIInterfaceOrientationPortraitUpsideDown" orientations were provided for the UISupportedInterfaceOrientations Info.plist key in the com.moodle.aprende bundle, but you need to include all of the "UIInterfaceOrientationPortrait,UIInterfaceOrientationPortraitUpsideDown,UIInterfaceOrientationLandscapeLeft,UIInterfaceOrientationLandscapeRight" orientations to support iPad multitasking` – Aldo Fernando Saia Aug 28 '23 at 12:25
@AldoFernandoSaia, portrait mode is only for iPhone. For iPad in Info.plist must be with all orientations. Check [this](https://snappify.com/view/31dd4e3a-ffb0-447e-9fdb-c06164ee0fd7) example – stanimirsp Aug 28 '23 at 13:44

score 0 · Answer 10 · answered May 02 '17 at 08:32

You can try this:-

Cordova plugin to set/lock the screen orientation in a common way for iOS, Android, WP8 and Blackberry 10. This plugin is based on an early version of Screen Orientation API so the api does not currently match the current spec.

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

or try this code in xml config:-

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

How to restrict app to portrait mode only in ionic for all platforms?

10 Answers10

Ionic v2+ Update

Linked