Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

299
Views
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?

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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');
        }   
}
about 4 years ago · Santiago Trujillo Report

0

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>
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!