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); }}
maximum-scale=1.0
stays in effect after the gesture starts. Is there any way to fix this? – LandonSchropp May 6 '12 at 22:56