Fix iOS Orientation Change Zoom Bug

fixorientationzoom.js

/*




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 );

Minified:

(function(j){var i=j.document;if(!i.querySelectorAll){return}var l=i.querySelectorAll("meta[name=viewport]")[0],a=l&&l.getAttribute("content"),h=a+", maximum-scale=1.0",d=a+", maximum-scale=10.0",g=true,c=j.orientation,k=0;if(!l){return}function f(){l.setAttribute("content",d);document.body.innerHTML=document.body.innerHTML;g=true}function b(){l.setAttribute("content",h);g=false}function e(m){c=Math.abs(j.orientation);k=Math.abs(m.accelerationIncludingGravity.x);if(k>8&&c===0){if(g){b()}}else{if(!g){f()}}}j.addEventListener("orientationchange",f,false);j.addEventListener("devicemotion",e,false)})(this);

Nice job Scott!

Uglified (save 34 bytes over the leading minified version :P):

(function(a){function j(){c.setAttribute("content",f),document.body.innerHTML=document.body.innerHTML,g=!0}function k(){c.setAttribute("content",e),g=!1}function l(b){h=Math.abs(a.orientation),i=Math.abs(b.accelerationIncludingGravity.x),i>8&&h===0?g&&k():g||j()}var b=a.document;if(!b.querySelectorAll)return;var c=b.querySelectorAll("meta[name=viewport]")[0],d=c&&c.getAttribute("content"),e=d+", maximum-scale=1.0",f=d+", maximum-scale=10.0",g=!0,h=a.orientation,i=0;if(!c)return;a.addEventListener("orientationchange",j,!1),a.addEventListener("devicemotion",l,!1)})(this);

Fantastic!

This seems to address the tilt issue:

Edit: I am bad at doing JavaScript. This should work now.

(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 );

Thanks @Wilto. Updated, prop'd :)

Before minifying again, let's see if we can't get this beast simplified. QSA can be just QS, for one.

@scottjehl Doesn't the use of document.body.innerHTML = document.body.innerHTML; mean that all bound event handlers get wiped when restoreZoom() is executed?

Test URL here btw http://jsbin.com/esitej/

@necolas. Ooh good call, I'm not sure, but actually I don't think we need that part anymore. Can someone test? http://jsbin.com/esitej/2

...I forgot I'd added that as a last-ditch effort to get zoom to restore in an earlier version.

Suggestion: Use doc.querySelector( "meta[name=viewport]" ) instead of doc.querySelectorAll( "meta[name=viewport]" )[ 0 ]. document.querySelectorAll is if you intend to use multiple elements.

Okay folks, the git repo's here: https://github.com/scottjehl/iOS-Orientationchange-Fix

The demo url's in ghpages: http://scottjehl.github.com/iOS-Orientationchange-Fix/

Article posted here: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/

Thanks @Krinkle. Care to submit a pull? Otherwise, I'll get in there soon!

Interesting!

But a quick Q: Maybe I'm missing something here when viewing the demo, but when I rotate on iOS5 the text still gets enlarged, so you don't actually take advantage of the added width in landscape? Should the aim not be to reflow?

As it stands, is this demo any different to just using width=device-width on its own?

Works well for me, thanks a lot !
@alexgibson : the working demo is http://scottjehl.github.com/iOS-Orientationchange-Fix/

@opi - ah, it seems all the demo needs is a sprinkling of:

-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;

and the body text does not resize and reflows properly - great job @scottjehl!

This does work great - very clever solution! My only reservation is that iOS5 uses geolocation for compass calibration the whole time the browser window is open. I'm not sure what effect this has on battery life, but might be worth consideration?

You can enable the status bar icon for this in:

Settings -> Location Services -> System Services -> Status Bar Icon set to On

Edit - perhaps an alternative event could be to use devicemotion instead of deviceorientation? This would mean it does not require a gyroscope (only iPhone 4+), and could be done using just raw accelerometer events.

doc.querySelector( "meta[name=viewport]" ) === doc.querySelectorAll( "meta[name=viewport]" )[ 0 ]

:)

This is a clever solution, thanks for offering it up!

My only concern is that it seems to be pretty intensive - deviceorientation is getting fired constantly (see http://frontendstuff.com/javascript/deviceorientation-demo.html). This takes up CPU cycles and also drains the battery faster. It might be worth putting into a setTimeout that adds a 50-100ms (?) delay so it's not so intensive. I guess the only danger there is that the user might rotate the screen so fast that checkTilt doesn't get fired in time.

I'm proposing another solution that aims to fix the issues people found in this one. It's a highly different approach (no gesture/accelerometer hacking).

https://github.com/sergiolopes/ios-zoom-bug-fix

interesting. I'm not sure about setting width to device height… that doesn't seem quite what we'd usually want or expect, and introducing a css3 transform may bring undesirable results to the layout. Hmm. Not sure. Cool idea. I guess I'll need to think about it more. FWIW, the approach above has been improved since this gist and is now using devicemotion instead of orientation (which brings wider iOS support). It's close to "bulletproof" with fast flips and different tilts too. We included the latest (modified a bit) in jQuery Mobile. https://github.com/scottjehl/iOS-Orientationchange-Fix

…

On Feb 28, 2012, at 4:27 PM, Sérgio Lopes wrote: I'm proposing another solution that aims to fix the issues people found in this one. It's a highly different approach (no gesture/accelerometer hacking). https://github.com/sergiolopes/ios-zoom-bug-fix --- Reply to this email directly or view it on GitHub: https://gist.github.com/1568180

@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 with device-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 than deviceorientation! 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 :)