Skip to main content Accessibility Feedback

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.

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips