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
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.
- Previous post: Make sure your HTML5 document outline is backwards compatible
- Next post: CSS generated content and screen readers
Subscribe / follow
- Project/Product Manager – H+K Digital at Hill+Knowlton Strategies (Dallas, TX, US)
- Senior Front End Developer at Synacor, Inc. (Buffalo, NY, Ne, US)
- Front-End Slicer at Slice n Press (US, , US)
- END TO END WEB DEVELOPER FOR THE ENTERTAINMENT INDUSTRY at Analog Creative Inc. (Venice, CA, Ca, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost