Css – iPad – “zoomed in” on portrait rotation

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

Just solved my issue with this by adding this HTML5 Viewport meta tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

to the head section of my HTML, maybe a variation of this meta tag may help?

Although my issue was triggered when my app was started in landscape mode, while yours in portrait mode, it may be a common cause.

I also had another funny issue with the webView in iPad and the common solution seems to be that meta tag:

iPad Simulator WebView/Google Maps API Issue