forked from scottjehl/iOS-Orientationchange-Fix
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
scottjehl
committed
Jan 6, 2012
0 parents
commit a9b9689
Showing
4 changed files
with
105 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
.project | ||
*~ | ||
*.diff | ||
*.patch | ||
.DS_Store |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
A fix for the iOS orientationchange zoom bug. | ||
======================= | ||
|
||
Authored by @scottjehl, rebounded by @wilto. | ||
MIT License. | ||
|
||
Instructions: include the script, enable your zooms. (I'll fill that out more later...). | ||
|
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>iOS bug test page</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
</head> | ||
<body> | ||
|
||
<h1>Test page for ios-orientationchange-fix.js</h1> | ||
|
||
<p>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.</p> | ||
|
||
|
||
<h2>Summary of bug</h2> | ||
<p>When the meta viewport tag is set to content="width=device-width,initial-scale=1", or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.</p> | ||
|
||
<p>When switching to portrait mode, the layout adapts perfectly. The issue only occurs in landscape. | ||
If the content attribute is adjusted with either user-scalable=no or maximum-scale=1, the problem goes away, but then scaling is disabled, which is undesirable.</p> | ||
|
||
<h2>Steps to Reproduce: </h2> | ||
<ol> | ||
<li>Open this page in portrait orientation on an iOS device or emulator.</li> | ||
<li>Change to landscape orientation</li> | ||
</ol> | ||
|
||
<h2>Expected Results:</h2> | ||
<p>The page should remain scaled at 1.0, and the page width should shrink to fit the viewport.</p> | ||
|
||
<h2>Actual Results (without included fix):</h2> | ||
<p>The page is zoomed past 1.0, cropping a portion of the page from view and causing the content to be much too large.</p> | ||
|
||
<h3>Notes: </h3> | ||
<p>Developers should not have to disable user-scaling to enable smooth changes in orientation.</p> | ||
|
||
|
||
<p>Thanks!</p> | ||
<p>Scott Jehl, Filament Group / jQuery Mobile Team</p> | ||
|
||
|
||
<script src="ios-orientationchange-fix.js"></script> | ||
</body> | ||
</html> |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
/*! A fix for the iOS orientationchange zoom bug. | ||
Script by @scottjehl, rebound by @wilto. | ||
MIT License. | ||
*/ | ||
(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 ); | ||
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 ); |