A Fix for the iOS Orientationchange Zoom Bug
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
People enjoy the ability to pinch and zoom websites on their iPhones, iPads, and iPod Touch devices. Unfortunately, a nasty usability bug exists on iOS that causes a user-zoomable page to scale beyond the width of the viewport when the device’s orientation changes from portrait to landscape. As a result, the page ends up cropped by the viewport, and users have to manually zoom the page back out again after changing orientation: annoying at best, confusing at worst.
The bug has existed for years now; I submitted it to Apple a long, long time ago (The bug report was immediately closed as “duplicate”, meaning someone filed it even longer ago. Complementary example here), but it has never been fixed, not in the iOS4.x updates, and not in iOS5 either. Jeremy Keith recently revived interest in its demise through his post iWish, which does a nice job of highlighting the history of the issue, and the attempts at working around it so far (none of which quite work as we need them to).
The common workaround is to disable the user’s ability to scale the page, which of course fixes the bug by introducing a potentially worse situation. Today, we’re offering a workaround that appears to fix the issue without introducing more problems.
Demo and Code
Permalink to 'Demo and Code'To test it out yourself, point an actual iOS device (not an emulator) to this test page.
The code for the demo can be found on Github (check the README file for a minified version). Just add the script to your site and it should do it’s thing. Please fork and help improve the code, if you’re so inclined!
How it works
Permalink to 'How it works'This fix works by listening to the device’s accelerometer to detect 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.
This fix has been tested on iOS 4 and 5, with expected results. Please post your feedback below!