CODEWITHSUNDEEP
cordovaangulartypescriptionic2
Martin
Martin

Reputation: 1090

Ionic 2 - Landscape orientation enabled for iPad only

I can set the orientation to portrait-only in config.xml as follows:

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

But how can I allow landscape orientation for iPad builds, while still disabling for iPhone as above?

Upvotes: 5

Views: 705

Answers (2)

Andrii Damm
Andrii Damm

Reputation: 27

You can delete a preference from config.xml and define it through a native plugin Screen Orientation

Then in app.component.ts lock orientation for phones:

        // check if platform is not a tablet
        if (platform.is('cordova') && !platform.is('tablet')) {
            // lock orientation to only portrait mode
            this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
            // set screen orientation to 'portrait'
            globalProvier.screenOrientation = this.screenOrientation.ORIENTATIONS.PORTRAIT;
        } else { // if it's tablet
            // set device type to 'tablet'
            globalProvier.deviceType = platform.platforms()[3];
            // set current orientation type ('portrait-primary' or 'landscape-primary' or 'portrait-secondary' or landscape-secondary)
            globalProvier.screenOrientation = this.screenOrientation.type;
            // set listener on changing orientation
            this.screenOrientation.onChange().subscribe(
                () => {
                    globalProvier.screenOrientation = this.screenOrientation.type;
                    console.log("Orientation Changed to: ", this.screenOrientation.type);
                }
            );
        }

Now you can dynamically adjust your layout depends from tablet orientations with globalProvier.screenOrientation variable. Add classes or using *ngIf in the templates.

*ngIf='this.globalProvider.screenOrientation == "landscape-primary" || <h3 *ngIf='this.globalProvider.screenOrientation == "landscape-primary" || this.globalProvider.screenOrientation == "landscape-secondary"'>Orientation: landscape</h3>

Upvotes: 0

user7605396
user7605396

Reputation:

According to Mike Harrison from Ionic he says:

Other than manually rotating the device, not really. This would be something you'd writing a plugin for to modify the main App view in cordova

But there is a Plugin from Ionic 1 . Look at it. Eventually you can use it in Ionic 2 too.

With this Plugin you could do something like:

if(/(ipad)/i.test(navigator.userAgent)) {
  //THIS IS THE PLUGIN IONIC 1 CODE 
  $scope.changeOriantationPortrait = function() {
            screen.lockOrientation('portrait');
        }   
}

Upvotes: 3

Related Questions