0

I'm using the screen orientation plugin. It works well but after I lock the screen orientation the screen size remains with the previous orientation size. So I have to reload the app to get the right screen size after lock the orientation. Any idea why this behavior? I need to get the right size after the lock. Here a code sample:

console.log(window.screen.width) // 450   
screen.orientation.lock('landscape').then(() => {
  console.log(window.screen.width) // 450. Should be 640
});

BTW: I didn't find a issue tracker of this plugin

Brian Mayo
  • 31
  • 4

1 Answers1

2

As a workaround, you could try listening for a proper orientation change event. The following snippet listens for a change event, and then removes the event listener after it fires once:

window.addEventListener('orientationchange', function() {
    // After orientationchange, add a one-time resize event
    var afterOrientationChange = function() {
        // YOUR POST-ORIENTATION CODE HERE
        // Remove the resize event listener after it has executed
        window.removeEventListener('resize', afterOrientationChange);
    };
    window.addEventListener('resize', afterOrientationChange);
});

Add this snippet before you lock the orientation.

Edit: Here is why I suggest using a resize event in conjunction with the orientation change event: https://stackoverflow.com/a/49383279/508098

I do not know why that plugin does not work as expected -- I did not look.

Whilst this would be better to discuss with the developers of that project, as you pointed out, there is no issue tracker for that plugin's project.

Try this and see if you get the right numbers.

Christopher Bull
  • 2,489
  • 1
  • 23
  • 27
  • 1
    Yes, that's a proper way to get working the app without reloading and it works. BTW I like to do this when I need a "one-time" listener window.addEventListener('resize', function afterOrientationChange() { window.removeEventListener('resize', afterOrientationChange) }); Thanks for your answer! – Brian Mayo Apr 11 '18 at 18:42