screen.width/screen.height not updating after screen rotation

Question

I'm experiencing this problem on an iPhone device (iPhone 7, iOS 10, but also other iPhones too): in javascript, if I intercept the orientationchange event, inside the handler, screen.width and screen.height remain the same (as before rotation).

Since this may depend from the viewport settings, this is how my viewport is declared in the .html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />

Everything works fine in Chrome's simulated visualization.

Thanks in advance for your help.

Answer 1

As far as I know screen the width/height will not change in the device after rotation. To check if the device is rotated you could read these properties

1. window.orientation: This value change from 0 to +90/-90
2. window.innerHeight/innerWidth: This values are swapped
3. document.documentElement.clientHeight/clientWidth: This values are swapped

Unfortunately, this behavior is not consistent across all Android/iOS/Window devices. I think it's pretty explained in this figure .