iOS orientation change and automatic text resizing

Most web developers who have viewed their work in an iOS device know that Safari for iOS likes to zoom in on the page and do weird things to font size when you change the device’s orientation from portrait to landscape. A too common way to prevent that is to completely disable the user’s ability to zoom, which you really do not want to do.

Luckily there is A Fix for the iOS Orientationchange Zoom Bug, a very clever one too. I’ve been using this in a few projects and have found it to work well. I have however run into a couple of issues (that in hindsight are pretty obvious) that I want to note here as a reminder to my future self.

The fix does not work in the iOS Simulator. As Scott Jehl mentions in the post about the fix, it relies on the device’s accelerometer. The simulator does not support that.
The fix takes care of automatic page zooming, but it does not prevent Safari from resizing text in a seemingly random way after an orientation change. I’ve noticed that this can result in pretty strange text size differences on the page. To prevent that you need to use body {-webkit-text-size-adjust:100%;} (not none), which took me a while to figure out. Ironically I mentioned this myself in Controlling text size in Safari for iOS without disabling user zoom. Oh well.

I still think it would be nice if there was a way of getting this behaviour without resorting to hacks, but I’m not holding my breath waiting for a fix from Apple.

Posted on May 9, 2012 in iOS, JavaScript, CSS