Question

We have an offline Safari application with UI designed for vertical use (pixel perfect). We would like the UI to stay vertical no matter what how the user rotates the ipod / iphone. Is it possible with offline Safari application?

This question is exactly the same as Can I prevent mobile safari from auto-rotating the screen on ipod touch or iphone? . Yet – the referenced question has no definite answer and has been prematurely accepted.

Answer 1

I’m not aware of any way to prevent the rotation if it needs to run in Safari rather than a native app with an embedded UIWebView.

While you can’t prevent the rotation, you can compensate for it like this:

1. Detect the rotation using the updateorientation event
2. In your event handler, find the current orientation using window.orientation. (e.g. 0, 90, -90, 180)
3. Update the class of your element to reflect the current orientation, and use styles like -webkit-transform:rotate(-90deg) to rotate your UI in the opposite direction.
4. If necessary, use window.scrollTo(0, 1); to scroll the address bar off the screen.