CODEWITHSUNDEEP
cssangularionic-frameworksassrotation
P. Mark
P. Mark

Reputation: 121

How to rotate or lock orientation a page in Ionic on specific device without cordova?

I'd like to lock orientation or rotate whole ionic page all device excpet for iPads. I try this:

@media (max-width: 1024px) {
  body {
  transform: rotate(90deg);
  }
}

but it is not working, but if i try this:

@media (max-width: 1024px) {
  ion-card {
  transform: rotate(90deg);
  }
}

it's working, but how can I do I don't have to rotate every element separately? How do I rotate the whole page?

Upvotes: 0

Views: 2536

Answers (1)

Oscar Sales DEV
Oscar Sales DEV

Reputation: 476

To lock the orientation use the plugin: https://ionicframework.com/docs/native/screen-orientation

If you only want to lock the orientation in a specific page, lock in the constructor and unlock when the page is destroyed:

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

constructor(private screenOrientation: ScreenOrientation) {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}

ngOnDestroy {
    this.screenOrientation.unlock();
}

To detect an iPad, depends on the criteria you use to decide that a device is an iPad, I see you're using only the screen size. So by "iPad" you mean any tablet or large device.

In that case, you can use the Platform class in the code to get the screen dimensions:

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { Platform } from '@ionic/angular';

constructor(private screenOrientation: ScreenOrientation,
            private platform: Platform) {

    if (this.platform.width() < 1024) {
        this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
    }
}

Upvotes: 2

Related Questions