CSS y la peculiaridad del tamaño de fuente de Safari

Se ha observado que Safari en iPhones muestra discrepancias inesperadas en el tamaño de fuente. Específicamente, el texto con tamaños de fuente más pequeños (por ejemplo, 13 px) aparece más grande que aquellos con tamaños más grandes (por ejemplo, 15 px). Este comportamiento desconcertante plantea la pregunta: ¿existen factores relacionados con CSS u otros factores responsables de las anulaciones del tamaño de fuente de Safari?

Para abordar este misterio, es esencial comprender un aspecto crucial de Safari en dispositivos móviles. Como medida fácil de usar, Mobile Safari ajusta automáticamente la escala del texto cuando detecta el riesgo de que el texto se reproduzca demasiado pequeño. Este es un intento de mejorar la legibilidad, especialmente en pantallas de iPhone más pequeñas. Para superar este ajuste automatizado, una propiedad CSS viene al rescate: -webkit-text-size-adjust.

Aquí hay un ejemplo práctico para eliminar la confusión sobre el tamaño de fuente para los usuarios de iPhone:

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

Este fragmento de CSS está dirigido a todos los dispositivos móviles con un ancho máximo de 480 px (es decir, dispositivos iPhone) y desactiva la escala automática de texto de Safari dentro del elemento

En conclusión, el escalado automático de texto de Mobile Safari tiene como objetivo optimizar la legibilidad en pantallas más pequeñas. Sin embargo, esto puede provocar comportamientos inesperados en el tamaño de fuente. Al emplear la propiedad -webkit-text-size-adjust, los desarrolladores pueden recuperar el control sobre el tamaño de la fuente y garantizar una visualización del texto consistente en diferentes dispositivos, incluidos los iPhone.