Problema con le dimensioni dei caratteri con iPhone

Question

Attualmente sto lavorando su una versione mobile di un sito Web, tutto è perfetto, funziona perfettamente su un iPhone, Blackberry e Android.

Ho un piccolo problema, non un grosso problema ma ancora un po 'fastidioso. Ho:

<h1> tag Set di 18px e coraggiose
<h2> tag impostati 12px e coraggiose
<p> tag impostati 12px e normale

Ora tutto sembra grande su iPhone durante la visualizzazione in verticale, ma quando il dispositivo viene ruotato in orizzontale le <h1> titoli vanno più piccola (difficile da dire, ma forse più piccola delle <h2> tag ?!

Ecco il mio css:

h1 { 
color:#FFFFFF; 
font-size:18px; 
line-height:22px; 
font-weight:bold; 
margin-top:0px; 
} 

h2 { 
font-size:12px; 
color:#333333; 
font-weight:bold; 
margin-bottom:-5px; 
} 

p { 
color:#333333; 
font-size:12px; 
line-height:18px; 
font-weight:normal; 
} 

Answer 1

credo siete alla ricerca di questo nel vostro CSS:

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

Answer 2

Come affermato nella risposta di Neurofluxation è possibile utilizzare la regola CSS -webkit-text-size-adjust, ma fate attenzione che questo può impedire agli utenti di regolazione la dimensione del carattere anche sul Webkit desktop (vedere this article per ulteriori dettagli).

Alla luce di questo è probabile che valga la pena controllare via CSS3 media queries (o user agent) per essere sicuri.

Ad esempio,

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

Answer 3

Una soluzione migliore può essere utilizzando il 100% al posto di nessuno, come affermato da user612626 in una discussione più vecchio: Font size rendering inconsistencies on an iPhone

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

questo modo i browser desktop di WebKit possibile regolare dimensioni e zoom anche proporzionalmente. Penso che questo sia un approccio migliore del filtraggio in base alla dimensione dello schermo.

Spero che aiuti.