Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Preventing text scaling on iPhone landscape orientation change

Posted: April 25, 2015
Written by: Saints At Play
Category: CSS

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.

« Return to Posts

Comments

Gravatar
Domitilasawkard

July 20, 2015

Wonderful blog you have here but I was curious about if you knew of any user discussion forums that cover the same topics discussed here?

I'd really love to be a part of group where I can get advice from other experienced individuals that share the same interest.
If you have any recommendations, please let me know.
Thanks!

Gravatar
Jacqulynksetterland

July 19, 2015

Have you ever considered publishing an e-book
or guest authoring on other sites? I have a blog centered on the same information you
discuss and would really like to have you share some stories/information. I
know my viewers would appreciate your work. If you're even remotely interested, feel free to shoot me an e mail.

Gravatar
Titusxnager

July 14, 2015

Hey! Would you mind if I share your blog with my zynga group?

There's a lot of folks that I think would really appreciate your
content. Please let me know. Thanks

Gravatar
Donyambroks

July 14, 2015

whoah this blog is magnificent i like reading your posts.

Keep up the great work! You understand, lots of persons are hunting around for this information, you can aid them greatly.

Gravatar
Zettaabairo

June 3, 2015

This is the perfect blog for anyone who wants to understand this topic.
You understand so much its almost tough to argue with you (not that I actually will
need to…HaHa). You certainly put a brand new spin on a topic
that has been written about for ages. Great stuff, just wonderful!

Gravatar
Ethelenekmolen

June 1, 2015

Fabulous, what a web site it is! This weblog provides useful data to us,
keep it up.

Gravatar
Maria

May 30, 2015

Great post. I was checking continuously this blog and I am impressed!

Extremely useful information particularly the last part :) I care for such info a lot.
I was seeking this certain information for a very long time.
Thank you and best of luck.

Gravatar
Freemusicdownloadsb.com

May 14, 2015

Fantastic goods from you, man. I've understand your stuff previous to and you're just too wonderful.
I really like what you have acquired here, really like what you
are saying and the way in which you say it.
You make it entertaining and you still take care of to keep it wise.
I can not wait to read far more from you. This is really a terrific
web site.

Gravatar
Quest Bars

May 9, 2015

My coder is trying to persuade me to move to .net from PHP.

I have always disliked the idea because of the costs. But he's tryiong none the less.
I've been using WordPress on various websites for about a year and am concerned about switching to another platform.
I have heard excellent things about blogengine.net.
Is there a way I can import all my wordpress posts into it?
Any kind of help would be greatly appreciated!

Gravatar
Web Development Minneapolis

April 26, 2015

Howdy! I just wish to give you a huge thumbs up for your excellent information you've got right here on this post.
I'll be returning to your site for more soon.

Posting comments after three months has been disabled.