iPad layout scales up when rotating from portrait to landscape

Question

I have a added to the "viewport" meta tag "width=device-width,initial-scale=1.0" and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales the page up and I have to pinch zoom it back to a 1 scale.

I can fix this by adding the "maximum-scale=1.0, user-scalable=no", but I was wondering if there is a way I could fix this without taking away from the user the ability to zoom in the page.

If you have any suggestions I would love to hear them,
Thanks!

Answer 1

------ Update ------

This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fix that works for iOS6.

------ Original answer ------

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

Keep the Markup scalable

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

Then disable scalability with javascript until gesturestart 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);     } } 

Answer 2

Scott Jehl came up with a fantastic solution that uses the accelerometer to anticipate orientation changes. This solution is very responsive and does not interfere with zoom gestures.

https://github.com/scottjehl/iOS-Orientationchange-Fix

How it works: This fix works by listening to the device's accelerometer to predict when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed. This way, user zooming is never disabled while the page is in use.

Minified source:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);