diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a0f37ab --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.project +*~ +*.diff +*.patch +.DS_Store \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..186c74c --- /dev/null +++ b/README.md @@ -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...). + diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..897c66f --- /dev/null +++ b/demo.html @@ -0,0 +1,43 @@ + + + + + iOS bug test page + + + + +

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.

+ + +

Summary of bug

+

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.

+ +

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.

+ +

Steps to Reproduce:

+
    +
  1. Open this page in portrait orientation on an iOS device or emulator.
  2. +
  3. Change to landscape orientation
  4. +
+ +

Expected Results:

+

The page should remain scaled at 1.0, and the page width should shrink to fit the viewport.

+ +

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:

+

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

+ + +

Thanks!

+

Scott Jehl, Filament Group / jQuery Mobile Team

+ + + + + diff --git a/ios-orientationchange-fix.js b/ios-orientationchange-fix.js new file mode 100644 index 0000000..c21c323 --- /dev/null +++ b/ios-orientationchange-fix.js @@ -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 ); \ No newline at end of file