Font size rendering inconsistencies on an iPhone

Question

I’m testing my website and is working fine on every browser, except for the iphone browser (i think it’s mobile Safari?) that renders a piece of text with a bigger font that the rest. I’ve checked the CSS by hands and using firebug on the page and I can confirm I’ve put the same size to all of them. How do I fix this?

Answer 1

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).

Answer 2

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