Preventing text scaling on iPhone landscape orientation change

April 25, 2015, 6:08 pm
Author: James Griffiths

You may have come across the following issue while developing responsive websites: you're testing your finely crafted pages on an iPhone and change to a landscape orientation only to find your page text has suddenly increased in size.

No, you didn't do anything wrong: it's simply a quirk of text rendering on Webkit, Gecko & Trident based smartphones and the fix is surprisingly simple.

Vendor specific properties to the rescue

Just add the following rule/properties into your stylesheet, preferably towards the beginning - or if you're using a pre-processor like Sass you might decide to place the following into a dedicated base stylesheet file for similar rules:

body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
}

The above rules, which, by the way, are experimental and non-standard (which means that they might be unsupported in future browser versions) targets the following smartphone only browsers:

  • Webkit based browsers for iOS & Android (-webkit prefix)
  • Gecko based browsers for smartphones (-moz prefix)
  • Trident based browsers for Windows Phone (-ms prefix)

Both Webkit and Trident on smartphone devices allow percentage values to be used for adjusting text size scaling whereas Gecko browsers for smartphones do not (which is why a value of none has been used with the -moz-text-size-adjust property).

With the Webkit and MicroSoft vendor prefixed properties the text size stays consistent upon orientation change and allows the text to be zoomed into if the user decides they want to do this.

Now, with this fix in place, if you change orientations on your device you'll see the text stays at the same size regardless of portrait or landscape view.

Android Chrome and font boosting

Some developers have reported experiencing issues with Android Chrome boosting the size of text on their web pages.This appears to be based on elements with dynamic heights (I.e. those page elements that do not have fixed heights applied to them via CSS).

The following snippets have been proposed as workable solutions to this problem:

element or parent element {
  height: auto;
  min-height: 1px;
  max-height: 999999px;
}

Alternatively, for those who've found that the above rule might interfere with layouts/text-sizing on iOS devices or just simply does not work, the following viewport setting has been recommended instead:

<meta name="viewport" content="width=device-width, initial-scale=1">

This does not prevent font boosting but it does prevent unwanted scaling by setting the width of the web page to that of the device and sets the initial zoom level of the page when loaded.

And, if you don't know this already, you should ALWAYS use the meta viewport tag in your web page builds to help control how your website layout behaves on mobile/tablet devices.

So what was causing the text to scale originally?

As stated towards the beginning of this article the vendor prefixed rules only apply to smartphone browsers - this is due to a text inflation algorithm that these devices use. Smartphone browsers calculate the width of the web page based on the device viewport instead of the width of the device screen (which is the opposite of how a desktop web browser renders page widths).

What this means then is that when the viewport changes, to a landscape orientation for example, the browser determines the appropriate text size to be readable for that viewport change.

This of course doesn't necessarily mean that the resulting size increase works with the rest of the page design as the text may now look stupidly large. Thankfully the use of the vendor-prefixed properties and values discussed earlier helps to prevent this situation from occurring.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.