tamaño - letra de iphone para android



Problema de tamaño de fuente con iPhone (2)

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

Tengo un pequeño problema, no es gran cosa, pero aún un poco molesto. Yo tengo:

Etiquetas <h1> establecidas en 18 píxeles y en negrita
Etiquetas <h2> configuradas en 12 píxeles y en negrita
<p> etiquetas configuradas a 12 píxeles y normales

Ahora todo se ve muy bien en el iPhone cuando se ve en vertical, pero cuando el dispositivo se gira hacia el paisaje, los títulos <h1> vuelven más pequeños (difíciles de distinguir pero posiblemente más pequeños que las etiquetas <h2> ?!

Aquí está 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;
}

https://src-bin.com


Answer #1

Como se indica en la respuesta de Neurofluxation, puede usar la regla css -webkit-text-size-adjust, pero tenga en cuenta que esto puede evitar que los usuarios ajusten el tamaño de la fuente en Webkit de escritorio también (consulte este artículo para obtener más información).

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

P.ej,

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

Answer #2

Creo que estás buscando esto en tu CSS:

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




mobile-safari