Brandon Rosage

Jan 9, 2012 |

Fixing iOS' orientation and scale bug

The Filament Group’s Scott Jehl developed and shared a brilliant band aid this week for iOS’ frustrating orientation scaling bug.

The fix arrives via Javascript, which listens to iOS devices’ accelerometer to detect when a user is about to rotate their device. When the script detects an orientation change coming, it temporarily disables user zooming — for only the moment it’s appropriate. User zooming is restored once the device is either oriented close to upright, or after its orientation has changed.

So. Damn. Good.

Recall that web developers have wrestled with iOS in this respect since its launch, wishing to deliver their ‘responsively-designed’ web pages scaled to 100 percent. Using meta name="viewport" content="width=device-width, initial-scale=1.0" allows us to do this.

And it’s been important to deliver this experience to users without invoking maximum-scale=1.0 or user-scaleable=no (which prevents any scaling weirdness) because such a solution creates a whole batch of new problems. The biggest problem it introduces, in my opinion, is stripping users of the common and powerful ability to scale the web page as they see fit.

At the end of the day, we want users that are holding their iPhone in portrait view to see our web pages displayed 320 pixels wide — which they do. But we also want them to be able to rotate their device to landscape view and see the web pages adapt to 480 pixels wide.

Yet Mobile Safari continues to behave differently. When users move from portrait to landscape, our web pages display at a width larger than 480 pixels. Users have to double-tap to bring the scale back down to 100 percent.

See Jeremy Keith demonstrate this behavior, which is strangely gone when viewing web pages in iOS apps’ web view:

I’ve implemented Scott’s fix here on, so you’re welcome to test and sample the behavior here.

Until Apple addresses this bug (or offers a logical reason for Mobile Safari’s behavior), Mr. Jehl is the only person on the planet who can rightfully call Mobile Safari his bitch.