css - tipo - Algunos tamaños de fuente se hacen más grandes en Safari(iPhone)

tipo de letra en css

Question

¿Hay CSS u otras razones por las que Safari / iPhone ignoraría algunas configuraciones de tamaño de fuente? En mi sitio web en particular, Safari en el iPhone presenta cierto tamaño de fuente: texto de 13 píxeles más grande que el tamaño de fuente: texto de 15 píxeles. ¿Tal vez no es compatible con el tamaño de fuente en algunos elementos?

Answer 1

Además, asegúrese de establecer la configuración de zoom inicial en 1 en su metaetiqueta de ventana gráfica:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Answer 2

También compruebe si no tiene un "ancho / alto" configurado para los elementos que está manipulando, Safari da prioridad de tamaño sobre el tamaño de fuente en svg, Chrome y FF no parecen, al menos actualmente.

Answer 3

Tuve el mismo problema, resulta que en el CSS original había esta línea:

-webkit-text-size-adjust: 120%;

Tuve que cambiarlo al 100%, y todo fue sin problemas. No es necesario cambiar todos los px a em o %%.

Answer 4

Ya no uso definiciones de píxeles, ya que son realmente confusas y no son exactamente las mismas en todos los servicios visuales.

Conoce las Unidades

1. "Ems" (em): el "em" es una unidad escalable que se utiliza en medios de documentos web. Un em es igual al tamaño de letra actual, por ejemplo, si el tamaño de fuente del documento es 12pt, 1em equivale a 12pt. Los Ems son escalables por naturaleza, por lo que 2em equivaldrían a 24pt, .5em equivaldrían a 6pt, etc. Los Ems son cada vez más populares en los documentos web debido a la escalabilidad y su naturaleza amigable para dispositivos móviles.
2. Píxeles (px): los píxeles son unidades de tamaño fijo que se utilizan en medios de pantalla (es decir, para leer en la pantalla de la computadora). Un píxel equivale a un punto en la pantalla de la computadora (la división más pequeña de la resolución de su pantalla). Muchos diseñadores web usan unidades de píxeles en documentos web para producir una representación perfecta de píxeles de su sitio a medida que se representa en el navegador. Un problema con la unidad de píxeles es que no escala hacia arriba para lectores con discapacidad visual o hacia abajo para adaptarse a dispositivos móviles.
3. Puntos (pt): los puntos se usan tradicionalmente en los medios impresos (todo lo que se va a imprimir en papel, etc.). Un punto es igual a 1/72 de pulgada. Los puntos se parecen mucho a los píxeles, ya que son unidades de tamaño fijo y no pueden escalar en tamaño.
4. Porcentaje (%): la unidad de porcentaje es muy parecida a la unidad "em", salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de letra actual es igual al 100% (es decir, 12pt = 100%). Al usar la unidad de porcentaje, el texto sigue siendo totalmente escalable para dispositivos móviles y para el acceso.

Answer 5

Use 100% en lugar de Ninguno.

normalize.css incluye esto

Answer 6

La respuesta de Joe tiene buenas prácticas buenas, pero creo que el problema que describes se centra en el hecho de que Mobile Safari escanea automáticamente el texto si cree que el texto se volverá demasiado pequeño. Puede -webkit-text-size-adjust esto con la propiedad CSS -webkit-text-size-adjust . Aquí hay una muestra de cómo aplicar esto a su cuerpo, solo para el iPhone:

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