Jan 9, 2012 | ∞
The Filament Group’s Scott Jehl developed and shared a brilliant band aid this week for iOS’ frustrating orientation scaling bug.
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
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:
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.