Font size issue with iPhone

Question

Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.

I have one slight problem, not a big dea

Answer 1

As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).

In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.

E.g.,

@media only screen and (max-device-width: 480px) { 
    html {
        -webkit-text-size-adjust: none; 
    }
}

Answer 2

A better solution can be using 100% instead of none, as stated by user612626 in an older thread: Font size rendering inconsistencies on an iPhone

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

this way desktop webkit browsers can adjust size and zoom proportionally too. I think this is a better approach than filtering by screen size.

Hope it helps.

Answer 3

I believe you are looking for this in your CSS:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}