Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes for iOS Chrome and angle detection #23

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
A fix for the iOS orientationchange zoom bug.
=======================

Authored by @scottjehl, rebounded by @wilto.
Authored by @scottjehl, rebounded by @wilto. Updated By @peterwooster
MIT / GPLv2 License.

Demo: http://scottjehl.github.com/iOS-Orientationchange-Fix/

Minified src:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT / GPLv2 License.*/(function(a){function m(){d.setAttribute("content",g),h=!0}function n(){d.setAttribute("content",f),h=!1}function o(b){l=b.accelerationIncludingGravity,i=Math.abs(l.x),j=Math.abs(l.y),k=Math.abs(l.z),(!a.orientation||a.orientation===180)&&(i>7||(k>6&&j<8||k<8&&j>6)&&i>5)?h&&n():h||m()}var b=navigator.userAgent;if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&/OS [1-5]_[0-9_]* like Mac OS X/i.test(b)&&b.indexOf("AppleWebKit")>-1))return;var c=a.document;if(!c.querySelector)return;var d=c.querySelector("meta[name=viewport]"),e=d&&d.getAttribute("content"),f=e+",maximum-scale=1",g=e+",maximum-scale=10",h=!0,i,j,k,l;if(!d)return;a.addEventListener("orientationchange",m,!1),a.addEventListener("devicemotion",o,!1)})(this);
Instructions:
Include the script, enable your zooms. (I'll fill that out more later...).
Include the script, enable your zooms by setting the meta viewport

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=10.0" />

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.
61 changes: 32 additions & 29 deletions ios-orientationchange-fix.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
/*! A fix for the iOS orientationchange zoom bug.
Script by @scottjehl, rebound by @wilto.
Script by @scottjehl, rebound by @wilto, modified by Peter Wooster.
MIT / GPLv2 License.
*/

(function(w){

// This fix addresses an iOS bug, so return early if the UA claims it's something else.
// This fix addresses an Mobile Safari iOS bug, so return early if the UA claims it's something else.
var ua = navigator.userAgent;
if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
if( !( /iPhone|iPad|iPod/.test( navigator.platform )
&& /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua)
&& ua.indexOf( "AppleWebKit" ) > -1
&& ua.indexOf( "CriOS") == -1 // chrome for iOS doesn't have the bug
)){
return;
}

var doc = w.document;

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,
x, y, z, aig;

var meta = doc.querySelector( "meta[name=viewport]" );
if( !meta ){ return; }

var initialContent = meta && meta.getAttribute( "content" );
var disabledZoom = initialContent + ",maximum-scale=1";
var enabledZoom = initialContent + ",maximum-scale=10";
var enabled = true;
var x, y, z, aig;
function restoreZoom(){
meta.setAttribute( "content", enabledZoom );
enabled = true;
Expand All @@ -34,23 +36,24 @@
}

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( enabled ){
disableZoom();
}
}
else if( !enabled ){
restoreZoom();
}
var ori = w.orientation;
// if it's landscape we're out of here
if(90 == Math.abs(w.orientation)) {
if(enabled)restoreZoom();
return;
}

aig = e.accelerationIncludingGravity;
x = Math.abs( aig.x );
y = Math.abs( aig.y );

// If in the danger zone where x is much greater than y turn off zoom
if(y == 0 || (x/y) > 1.2){
if(enabled)disableZoom();
}else if( !enabled )restoreZoom();
}

w.addEventListener( "orientationchange", restoreZoom, false );
w.addEventListener( "devicemotion", checkTilt, false );
w.addEventListener( "orientationchange", restoreZoom, false );
w.addEventListener( "devicemotion", checkTilt, false );

})( this );
})( this );