Question

A long time back, I read a great article that describes a cross-browser friendly way to size text using CSS. The strategy described is as such:

body {
    font-size:100%;
    line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
    font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
    font-size:0.75em; /* 16x0.75=12 */
}

This strategy works great on every browser except Safari on the iPhone, which always seems to enlarge certain bits of text. Is there any strategy to prevent this from happening?

Normally my solution would be to add -webkit-text-size-adjust: none; to prevent the iPhone from enlarging the size of the text, but I recently came across this article, which describes that it doesn’t allow users to zoom in on the text on ANY Safari browser – clearly a problem. I know that there is a CSS-only solution out there, but I can’t find it. I just want to know how I should go about setting font-sizes so that they display the same on all browsers, including the iPhone.

Update: To show an example, if you look at this on an iPhone, you’ll notice that the text in the paragraph is significantly larger than the rest of the text around the site. Why is this text singled out, and is there any way that I can tell just by looking at the code that that will happen?

Answer 1

You have a technique you’re happy with, but with one downside:

This strategy works great on every
browser except Safari on the iPhone,
which always seems to enlarge certain
bits of text. Is there any strategy to
prevent this from happening?

..

Normally my solution would be to add
-webkit-text-size-adjust: none; to prevent the iPhone from enlarging the
size of the text, but I recently came
across this article, which describes
that it doesn’t allow users to zoom in
on the text on ANY Safari browser –
clearly a problem. I know that there
is a CSS-only solution out there, but
I can’t find it.

Looking at style.css from http://html5boilerplate.com/mobile/

/* Prevent mobile zooming while remain desktop zooming.
   github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14
 */
body {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: none;
}

That sounds like exactly what you’re after, especially when you read the comment in the link:

Just a suggestion, it seems like a
good idea to set
-webkit-text-size-adjust to 100% instead of none. Setting it to none
prevents font zooming in desktop
WebKit browsers, which seems like an
accessibility issue. Mobile Safari’s
default value is over 100%, which is
why text is bigger — so if you set it
to 100% instead of none, fonts stay
the correct size on mobile but can
still be zoomed on desktop.