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() { /* */ });