Created
January 6, 2012 00:27
-
-
Save scottjehl/1568180 to your computer and use it in GitHub Desktop.
Fix iOS Orientation Change Zoom Bug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
NOTE!!!! | |
The most updated version of this code is here: | |
https://github.com/scottjehl/iOS-Orientationchange-Fix | |
A fix for the dreaded iOS orientationchange zoom bug http://adactio.com/journal/5088/. Seems to work! | |
Authored by @scottjehl. Props to @wilto for addressing a tilt caveat. | |
MIT License. | |
FOR LATEST, SEE https://github.com/scottjehl/iOS-Orientationchange-Fix | |
*/ | |
(function(w){ | |
var doc = w.document; | |
if( !doc.querySelectorAll ){ return; } | |
var meta = doc.querySelectorAll( "meta[name=viewport]" )[ 0 ], | |
initialContent = meta && meta.getAttribute( "content" ), | |
disabledZoom = initialContent + ", maximum-scale=1.0", | |
enabledZoom = initialContent + ", maximum-scale=10.0", | |
enabled = true, | |
orientation = w.orientation, | |
rotation = 0; | |
if( !meta ){ return; } | |
function restoreZoom(){ | |
meta.setAttribute( "content", enabledZoom ); | |
document.body.innerHTML = document.body.innerHTML; | |
enabled = true; | |
} | |
function disableZoom(){ | |
meta.setAttribute( "content", disabledZoom ); | |
enabled = false; | |
} | |
function checkTilt( e ){ | |
orientation = Math.abs( w.orientation ); | |
rotation = Math.abs( e.gamma ); | |
if( rotation > 8 && orientation === 0 ){ | |
if( enabled ){ | |
disableZoom(); | |
} | |
} | |
else { | |
if( !enabled ){ | |
restoreZoom(); | |
} | |
} | |
} | |
w.addEventListener( "orientationchange", restoreZoom, false ); | |
w.addEventListener( "deviceorientation", checkTilt, false ); | |
})( this ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@scottjehl Hi Scott! Thanks for your feedback on my approach!
The CSS3 transform doesn't impact the layout, it just scales the entire page with the original layout unchanged. And setting width to
device-height
mean we have to scale up content when in portrait mode. I have an alternate version of the script that works withdevice-width
and in this case we have to scale down in landscape mode. Working with scale up is a lot easier than with scale down, but maybe I could publish the other version too and let people choose.And I knew about your new project and its evolutions. Using
devicemotion
seems much better thandeviceorientation
! I still have some issues with it, specially when quickly rotating my iPad (couldn't reproduce on my old iPod Touch 2nd gen; its hardware is so slow that a fast rotation doesn't affect the script :)