How to Reset the Scale/Zoom of a Web App on an Orientation Change on the Iphone

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

Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale

Keep the Markup scalable by not setting a maximum-scale in markup.

<meta name="viewport" content="width=device-width, initial-scale=1">

Then disable scalability with javascript on load until gesturestart when you allow scalability again with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

---

Update 22-12-2014:
On an iPad 1 this doesnt work, it fails on the eventlistener. I've found that removing .body fixes that:

document.addEventListener('gesturestart', function() { /* */ });

Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

Here is what I use to deal with the zoom on my media-queries:

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

The maximum-scale is the thing that sold it for me. It means the transition from portrait to landscape on an iphone is really smooth with no zoom problems at all...

Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone

You also want to add the maximum scale

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

UPDATED
I agree with some of the comments, the declaration should not limit the scaling by the user as this is bad practice. The below is a better approach and I believe that the zooming bug has long since been fixed by Apple.

<meta name="viewport" content="width=device-width, initial-scale=1">

How do I make iPads not zoom my web page when they rotate?

We have disabled user zooming and have used a media query to tell users to keep their device landscape for the best experience (it's a web based presentation) but if they have the device portrait at all it messes up the scaling when it switches back to landscape and they can't get back to the original state.

Update:

Worked out a fix for this issue. You need to make sure that the viewport meta has maximum and minimum scales set to 1 as well. Eg:

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

---

Related Topics