Get iPhone font-size to be the same as other browsers

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.