Question

I have a web page that doesn’t (and shouldn’t) allow zooming on the iPad. Everything works great, except in this scenario where multiple tabs are open in Safari:

    1. have focus on my application's tab
    2. change to a different tab
    3. switch the iPad's orientation (i.e. portrait to landscape or vice versa)
    4. switch back to my web apps tab

The iPad, in many instances, will have zoomed in and there is no way for me to reset the zoom. Since I have zoom disabled via the viewport meta tag the zoom shouldn’t be changing. To make things even stranger: IF I REFRESH THE PAGE OR EVEN NAVIGATE TO SOME OTHER WEBSITE THE ZOOM WILL NOT REFRESH.

I’ve also noticed this occuring on other websites. I’ve tried every conceivable meta tag combination (that disables zooming). I’m testing with an iPad 3. If I only have one tab open in Safari I have no issues.

This doesn’t seem to be related to the “famous” orientation issue as the undesirable zoom occurs when the application does not have focus
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

Answer 1

Here is how I fixed this:

1. use the onorientationchange event to detect if the zoom is changed
2. if the zoom has changed change the viewport meta tag to: user-scalable=yes
3. on $(window).resize or onorientationchange change viewport back to user-scalable=no if the user has changed the zoom back to fit the screen