There's a bug in Mobile Safari on iOS that causes the scale to be incorrect when you go from portrait to landscape. This interferes with the behaviour of responsive designs and is quite confusing to the user. the bug does not occur on Chrome under iOS or on Android. I haven't had a chance to test on Blackberry or Windows Phone but I suspect they work as this seems to be a Safari bug.

I've done some research into fixes for this and have put together a collection of example pages. at silvermapleweb.com/zoom/. These pages illustrate the following:

  • no fixes applied, this is the standard behaviour

  • turn zoom off using the meta tag, this makes the orientation change work properly, but defeats one of the best accessibility features of touch screens

  • adjust the viewport around gestures, this attempts to turn the zoom on when the user starts a gesture, unfortunately it doesn't detect the first one, but does work if the user tries again

  • reload the page on transition from portrait to landscape, this works well but is slow and clunky

  • use the accelerometer to predict when a orientation change is likely and turn the zoom off, this is quite complex but works most of the time.

  • don't set the viewport scales, this is a popular choice that makes the font-size change between portrait and landscape. This is what Ethan Marcotte does on unstoppable robot ninja.

Please give these a try and feel free to borrow any of the code, all the JS is in the HTML. If you know a better way to do this please let me know. The accellerometer fix is derived from github.com/scottjehl/… with changes to make it not apply to Chrome and to make the prediction more reliable. So far it's my favourite as it works well most of the time, you can break it by very athletic orientation changes.

http://silvermapleweb.com/zoom/