How to restrict app to portrait mode only in ionic for all platforms?
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
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 yourpackage.json
fileImport
ScreenOrientation
PluginImport 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"
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" />
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".