How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

Question

I'm having the same problem that a couple of others have had with getting the correct behavior in a web app on an orientation change, and there doesn't seem to be an obvious solution - I've seen this question asked a couple of times on Stack Overflow and no one's yet been able to answer it.

When I start the app in portrait mode, it works fine. Then I rotate into landscape and it's scaled up. To get it to scale correctly for the landscape mode I have to double tap on something twice, first to zoom all the way in (the normal double tap behavior) and again to zoom all the way out (again, the normal double tap behavior). When it zooms out, it zooms out to the correct NEW scale for landscape mode.

Switching back to portrait seems to work more consistently; that is, it handles the zoom so that the scale is correct when the orientation changes back to portrait.

I am trying to figure out if this is a bug? or if this is something that can be fixed with Javascript?

With the viewport meta content, I am setting the initial-scale to 1.0 and I am NOT setting minimum or maximum scale (nor do I want to). I am setting the width to device-width.

Any ideas? I know a lot of people would be grateful to have a solution as it seems to be a persistent problem.

Thank you!

Answer 1

MobileSafari supports the orientationchange event on the window object. Unfortunately there doesn't seem to be a way to directly control the zoom via JavaScript. Perhaps you could dynamically write/change the meta tag which controls the viewport — but I doubt that would work, it only affects the initial state of the page. Perhaps you could use this event to actually resize your content using CSS. Good luck!

Answer 2

I had the same problem, and setting the maximum-scale=1.0 worked for me. I have yet to find any downsides with this solution, since when the content exeeds the width-resolution it the device still allows zooming out.

The viewport code:

    <meta name = "viewport"
content = "width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Answer 3

If you have the width set in the viewport :

<meta name = "viewport" content = "width=device-width; initial-scale=1.0;
 maximum-scale=1.0;" />

And then change the orientation it will randomly zoom in sometimes (especially if you are dragging on the screen) to fix this don't set a width here I used :

<meta id="viewport" name="viewport" content="initial-scale=1.0; user-scalable=0;
minimum-scale=1.0; maximum-scale=1.0" />

This fixes the zoom whatever happens then you can use either window.onorientationchange event or if you want it to be platform independant (handy for testing) the window.innerWidth method.