Question

I am trying to write a web app for Android and iPhone.
I have an issue when the device orientation changes. On the Android the orientationChanged event fires (from portrait to landscape) before the new horizontal dimensions are reported (reports portrait dimensions, with iPhone it fires AFTER (reports landscape dimensions…correct behavior).

So I fell back to the resize event. Another issue cropped up. Android works fine in browser. iPhone is works fine when the app is launched from the home screen. However in mobile safari, the resize event is never triggered when roating from landscape to portrait, since the browser just provides you the capability to scroll around the page horizontally.

I need a way to detect an orientation change event and get the new dimensions from DOM elements in order to resize other elements on the screen that will work for Android, mobile Safari and home screen web apps.

Thanks

Answer 1

Fell back to device detection, since there is no reliable way of doing this generically.