Detect the screen orientation to a device


#1

I use the screen orientation plugin to change the screen orientation in my app from portrait to landscape mode.
When the screen has changed to landscape, I want to trigger an event.

I tried to use the this.screenOrientation.onChange() method but this method triggers the event when the screenOrientation.lock method runs, before the actual screen on the device has changed.
However it works fine when I add a Timeout to give my device the time it needs to change it screen before the event is fired.
I wonder if there is a way to solve this without adding the timeout?


#2

Here’s an example of using the onChange() - not sure if this is getting towards what you’re trying to do - but check it out anyway.


#3

Don’t help in this case…
The onChange() method is triggerd excactly at the same time this method runs: this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
That’s not what I want…

It takes a few ms before the display on the device rotates. I want to trigger an event at the time the screen has rotated :slight_smile:


#4

Why?
(need 20 chars so here’s a pointless sentence lol)


#5

In my app the main page is in portrait mode. My app has another page with a signaturePad, and this page should be in landscape mode.
I am setting the size of the signature pad to: 'canvasWidth': window.innerWidth, 'canvasHeight': window.innerHeight
The problem is that the signature pad size is set to the size of the phone in portrait mode. The signature pad gets a lot of blank space on the side of it. I want the signature pad to go all the way to the edges…


#6

With you.

Canvases are funky things. The timeout would probably do it.

Depending on the plugin in use have you tried something like…

<div style="height: 95vh; width: 95vw;"></div>

That would have at least a chance at being dynamic…


#7

Found a solution: Calling a resize method

canvasResize()
{ let canvas = document.querySelector('canvas');
  var ratio = Math.max(window.devicePixelRatio || 1, 1);
  canvas.height = canvas.clientHeight * ratio;
  canvas.width = canvas.clientWidth * ratio;
  this.signaturePad.clear();}