diff --git a/demo.html b/demo.html index 897c66f..50c8905 100644 --- a/demo.html +++ b/demo.html @@ -6,7 +6,7 @@ - +

Test page for ios-orientationchange-fix.js

This page is a demo of a bugfix for the iOS orientation change bug, in which the page zooms beyond the viewport on orientationchange when user scaling is enabled. Summary below.

@@ -30,14 +30,14 @@

Expected Results:

Actual Results (without included fix):

The page is zoomed past 1.0, cropping a portion of the page from view and causing the content to be much too large.

-

Notes:

+

Notes:

Developers should not have to disable user-scaling to enable smooth changes in orientation.

Thanks!

Scott Jehl, Filament Group / jQuery Mobile Team

- - + + - + \ No newline at end of file diff --git a/ios-orientationchange-fix.js b/ios-orientationchange-fix.js index c734182..a1b5f03 100644 --- a/ios-orientationchange-fix.js +++ b/ios-orientationchange-fix.js @@ -10,45 +10,45 @@ return; } - var doc = w.document; + var doc = w.document; - if( !doc.querySelector ){ return; } + if( !doc.querySelector ){ return; } - var meta = doc.querySelector( "meta[name=viewport]" ), - initialContent = meta && meta.getAttribute( "content" ), - disabledZoom = initialContent + ",maximum-scale=1", - enabledZoom = initialContent + ",maximum-scale=10", - enabled = true, + var meta = doc.querySelector( "meta[name=viewport]" ), + initialContent = meta && meta.getAttribute( "content" ), + disabledZoom = initialContent + ",maximum-scale=1", + enabledZoom = initialContent + ",maximum-scale=10", + enabled = true, x, y, z, aig; - if( !meta ){ return; } + if( !meta ){ return; } - function restoreZoom(){ - meta.setAttribute( "content", enabledZoom ); - enabled = true; - } + function restoreZoom(){ + meta.setAttribute( "content", enabledZoom ); + enabled = true; + } - function disableZoom(){ - meta.setAttribute( "content", disabledZoom ); - enabled = false; - } + function disableZoom(){ + meta.setAttribute( "content", disabledZoom ); + enabled = false; + } - function checkTilt( e ){ + function checkTilt( e ){ aig = e.accelerationIncludingGravity; x = Math.abs( aig.x ); y = Math.abs( aig.y ); z = Math.abs( aig.z ); // If portrait orientation and in one of the danger zones - if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){ + if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){ if( enabled ){ disableZoom(); - } - } + } + } else if( !enabled ){ restoreZoom(); - } - } + } + } w.addEventListener( "orientationchange", restoreZoom, false ); w.addEventListener( "devicemotion", checkTilt, false );