teclado - fuentes para iphone

Incoherencias de representación de tamaño de fuente en un iPhone

Question

Estoy probando mi sitio web y funciona bien en todos los navegadores, excepto en el navegador de iPhone (¿creo que es Safari móvil?) Que representa un texto con una fuente más grande que el resto. He revisado el CSS con las manos y usando Firebug en la página y puedo confirmar que les he puesto el mismo tamaño a todos. ¿Cómo puedo solucionar esto?

Answer 1

Arregle este mismo problema con:

<meta name="viewport" content="width=device-width">

De HTML5Boilerplate actualmente está here

Answer 2

Coloque tal regla en su CSS y su problema desaparecerá:

body {
    -webkit-text-size-adjust: none;
}

EDITAR: Mejor solución, proporcionada por user612626, es usar el 100% de valor en lugar de ninguno.

Answer 3

Mobile Safari intenta adaptar el contenido para que sea legible en la pantalla de forma predeterminada: tiene diferentes estilos predeterminados para otros navegadores.

No conozco las reglas exactas, pero cuando se trata de tamaños de fuentes, parece funcionar así:

• Texto dentro de un párrafo, elemento de lista u otro elemento de ''texto'': aplique el estilo del autor sin adaptarlo.

• Texto dentro de un DIV u otro elemento no específico: tratar como ''texto sin formato'' y ''adaptar'' el tamaño de acuerdo con las reglas de Mobile Safari.

Entonces, la respuesta corta es, envuelva su texto en un párrafo y aplique la regla de tamaño de fuente a eso.

Aquí hay un ejemplo rápido y sucio:

<!-- 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>

(Obviamente, debe mover la regla de font-size al archivo CSS).

Answer 4

Para mejorar ligeramente la idea de Lukasz, intente usar la siguiente regla en su CSS:

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

Usar el valor ''100%'' en lugar de ''ninguno'', permite a todos los demás navegadores basados ​​en Webkit cambiar el tamaño del texto cuando se usa la función de zoom mientras se conserva el tamaño de fuente original.

Answer 5

Proporcione font-size:100% cuerpo font-size:100% , luego use el método "em" para dar tamaño de letra a cada elemento de su sitio web.

Esto hará que el tamaño de fuente sea 100% del tamaño de fuente predeterminado por navegador respectivo. Por ejemplo, el navegador iPhone safari tiene 12px = 1em (por supuesto, debe verificar el tamaño de fuente predeterminado localmente). Entonces, si quieres tener un tamaño de letra de 10px, solo divídelo por 12, es decir, "0.83em"

Espero que lo entiendas, también busca "css em unit" obtendrás una mejor visión.