Font size rendering inconsistencies on an iPhone

Solution 1:

To improve on Lukasz's idea slightly, try using the following rule in your CSS:

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

Using the value '100%' instead of 'none', allows all other Webkit-based browsers to still resize text when using the zoom function while still preserving your original font size.

This issue is arising only in modern browsers like safari, opera with iPhone device. Solution is

Append this style with the -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; with required class it works fine. Example: I want the condition to be applied only when request comes from mobile. So I have appended the complete navigation path that full fills my requirement.

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

or

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

} both will work fine. No need to apply the styles for complete body

Solution 2:

Mobile Safari does try to adapt content so that it's readable on screen by default - it has different default styles to other browsers.

I don't know the exact rules - but when it comes to font sizes, it seems to work like this:

• Text inside a paragraph, list item, or other 'text' element: Apply the author's style without adapting.

• Text inside a DIV or other non-specific element: Treat as 'plain text' and 'adapt' the size according to Mobile Safari's rules.

So - the short answer is, wrap your text in a paragraph, and apply the font-size rule to that.

Here's a quick and dirty example:

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p { font-size:10px; }
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

(obviously, you should move the font-size rule to the CSS file).

Solution 3:

I fixed this same issue with:

<meta name="viewport" content="width=device-width">

From HTML5Boilerplate currently it's here

Solution 4:

Put such a rule in your CSS and your problem is gone:

body {
    -webkit-text-size-adjust: none;
}

EDIT: A better solution, provided by user612626, is to use 100% instead of none.