Problema de tamaño de fuente con iPhone

Question

Actualmente estoy trabajando en una versión móvil de un sitio web, todo va bien, funciona bien en un iPhone, Blackberry y Android.

Tengo un pequeño problema, no es gran cosa, pero todavía un poco molesto. Tengo:

<h1> etiquetas conjunto de 18px y audaces
<h2> etiquetas establecen en 12 píxeles y audaces
<p> etiquetas establecen en 12 píxeles y normal

Ahora todo se ve muy bien en el iPhone cuando se ve en el retrato, pero cuando el dispositivo se coloque en horizontal los <h1> títulos van más pequeño (difícil de decir, pero posiblemente más pequeñas que las etiquetas <h2> ?!

Aquí es mi 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

creo que busca esto en tu CSS:

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

Answer 2

como se indica en la respuesta de Neurofluxation puede utilizar la regla CSS -webkit-text-size-adjust pero ten en cuenta que esto puede impedir que los usuarios ajusten el tamaño de fuente en el Webkit de escritorio también (vea this article para más detalles).

En vista de esto, es probable que valga la pena consultarlo a través de consultas de medios CSS3 (o agente de usuario) para estar seguro.

Por ejemplo,

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

Answer 3

Una mejor solución puede ser el uso de 100% en vez de ninguno, según lo declarado por user612626 en un hilo más: Font size rendering inconsistencies on an iPhone

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

esta manera navegadores WebKit de escritorio pueden ajustar tamaño y zoom proporcionalmente también. Creo que este es un mejor enfoque que el filtrado por tamaño de pantalla.

Espero que ayude.