Detect Screen Orientation

cordova
1

Hi!

1. What do I want to achieve?
I want to render (or navigate) a user to the right screen based on his device screen/device orientation.

2. What platform are you using? iOS or Android? Android
3. What OS environment? Windows, Linux, MacOS? Linux (Ubuntu)
4. Have you received an error or is it just not working? Just not working.
5. Cordova version if you have already wrapped your app?

  • Ionic version: 5.4.4
  • Cordova version: 9.0.0 (cordova-lib@9.0.1)

My attempts to detect screen orientation:

1. W3C Device Orientation API (as described here)

ngOnInit() {
  window.addEventListener("deviceorientation", e => console.log(e))
}
  • This works and I get new absolute, alpha, beta, and gamma whenever device orientation changes.
  • What is different from what I read in the docs is that I never get negative values for alpha, beta, gamma, absolute no matter how the device is oriented.
  • I’m not sure how to derive if a device is in landscape or portrait mode from the data I get from deviceorientation event listener

2. Cordova Screen Orientation API (as described here)

ngOnInit() {
    this.screenOrientation.onChange().subscribe(() => {
      console.log("Orientation Changed");
    });
}
  • this.screenOrientation.onChange() never got called even if I rotated an emulator
  • it got called if I manually locked new orientation (I think this is expected behaviour, but I’m unsure of how to find out the correct device orientation) like this:
  ngOnInit() {
    this.screenOrientation.onChange().subscribe(() => {
      console.log("Orientation Changed");
    });
    setTimeout(() => {
      this.screenOrientation.lock(
        this.screenOrientation.ORIENTATIONS.PORTRAIT
      );
    }, 10000);

3. I also tried to compare window.innerWidth and window.innerHeight and derive screen orientation from that. But the values never changed no matter what the position of an emulator was.

private window = window;
  ngOnInit() {
    window.addEventListener("deviceorientation", e => {
     if(window.innerHeight > window.innerWidth){
       // lock portrait using Cordova screen orientation plugin
     }else{
      // lock landscape using Cordova screen orientation plugin
     }
}
2

I’m able to distinguish between landscape-primary and landscape-secondary when rotating the emulator with the following code:

  ngOnInit() {
    this.platform.ready().then(() => {
      this.screenOrientation.onChange().subscribe(() => {
        console.log(this.screenOrientation.type); // This logs either landscape-primary or landscape-secondary
      });
      this.screenOrientation.lock(
        this.screenOrientation.ORIENTATIONS.LANDSCAPE
      );
    });

But I’m still unable to distinguish between landscape and portrait.

I think this behaviour is really strange as the only rotation changes I detect are the ones made for 180 degrees. In docs clearly says that rotations made for 180degrees are the ones that should NOT be recognized. WTF?

3

I think there is something broken within Ionic itself.