iOS rotation bug (and a fix)

One of the quirks of the Safari browser on iOS is that when rotating from portrait to landscape, the browser will zoom in, even when the content has been optimized for smaller screens.

Update: This bug has been fixed in iOS 5, so this script is no longer necessary.

To get around this quirk, people sometimes add maximum-scale=1 and/or user-scalable=no to their meta viewport tag in the header. While this stops the zoom bug, it also prevents users from manually zooming, too. That’s an accessibility faux pas.

Fortunately, there’s a javascript snippet from Scott Jehl and Mat Marquis that fixes the issue.

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.

Grab the code from GitHub, and then remove maximum-scale=1 and/or user-scalable=no from your header if you use them.