Font size render in iphone

Question

Hi everybody, i'm testing my website and is working fine on every browser, except for the iphone browser (i think it's safari mobile?) 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?

You can check the site on http://www.ilsegnale.it/?tpl=502

The piece of text i'm talking about it the one under "approfondimento" box

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:

<div class="appro_body">
  <p style="font-size:10px;">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.
    Il dato molto alto dell’astensionismo è segno che gli elettori sono 
    stufi di partecipare alla ricerca di successi personali di questo o quel
    politico. D'altro canto la legge Regionale ha mostrato qualche limite, 
    diciamolo pure; l’esclusione clamorosa nonostante il buon risultato di 
    Massimo Rossi come candidato consigliere o del verde assessore Canducci,
    suggerisce un sistema di preferenze più [...]
    <br><br>
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502"&gt;Leggi tutto...</a>
  </p>
</div>

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

Answer 2

Give body font-size:100%, then use "em" method to give font size to every element in your website.

This will make the font size 100% of the default font size by respective browser. For example iPhone safari browser has 12px = 1em (offcourse you need to check the default font size locally). Then if you want to have 10px font size, just divide it by 12, i.e "0.83em"

I hope you understand, also search for "css em unit" you will get better insight.