Algunos tamaños de fuente se muestran más grandes en Safari (iPhone)

¿Hay CSS u otras razones por las que Safari / iPhone ignoraría algunas configuraciones de tamaño de fuente? En mi sitio web particular, Safari en el iPhone muestra un tamaño de fuente: texto de 13 píxeles más grande que el tamaño de fuente: texto de 15 píxeles. ¿Es posible que no admita el tamaño de fuente en algunos elementos?

La respuesta de Joe incluye algunas buenas prácticas recomendadas, pero creo que el problema que estás describiendo se centra en el hecho de que Mobile Safari escala automáticamente el texto si cree que el texto se mostrará demasiado pequeño. Puede solucionar 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;
  }
}

Utilice 100% en lugar de Ninguno.

normalize.css incluye esto

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

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

Ya no uso definiciones de píxeles porque son realmente confusas y no son exactamente iguales 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 fuente actual, por ejemplo, si el tamaño de fuente del documento es 12pt, 1em es igual a 12pt. Los ems son de naturaleza escalable, por lo que 2em equivaldría a 24pt, .5em equivaldría a 6pt, etc. Los ems se están volviendo cada vez más populares en los documentos web debido a su 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 leerse en la pantalla de la computadora). Un píxel es igual a un punto en la pantalla de la computadora (la división más pequeña de la resolución de la pantalla). Muchos diseñadores web utilizan unidades de píxeles en documentos web para producir una representación perfecta de píxeles de su sitio tal como se representa en el navegador. Un problema con la unidad de píxeles es que no se escala hacia arriba para los lectores con discapacidad visual o hacia abajo para adaptarse a los dispositivos móviles.
3. Puntos (pt): Los puntos se utilizan tradicionalmente en medios impresos (cualquier cosa que se imprima 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 fuente actual es igual al 100% (es decir, 12 puntos = 100%). Mientras usa la unidad de porcentaje, su texto permanece completamente escalable para dispositivos móviles y para accesibilidad.

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

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

Tuve que cambiarlo al 100% y todo salió bien. No es necesario cambiar todos los px a em o %%.

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