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

110

¿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?

css safari mobile-safari font-size Alex
fuente

Respuestas:

248

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;
  }
}
David Kaneda
fuente
2
Acabo de encontrarme con este problema. Este pequeño truco de pantalla multimedia funciona a la perfección. Voy a empezar a incorporarlo en mi archivo de inicio CSS.
Throttlehead
1
¡Vaya, enfermo! Me ha estado volviendo loco, incluso intenté cambiar el nombre de la clase y configurar css en línea con jQuery antes de encontrar esto. ¡Salvador de la vida!
Christoffer Bubach
1
Ayudó mucho. Cheers :)
Dead Man
2
Asegúrese de utilizar la consulta de medios. Parece que esto puede dificultar la lectura de algunos textos: Tenga cuidado con -webkit-text-size-adjust: none
Gemmu
9
La respuesta debe actualizarse a -webkit-text-size-adjust: 100%: esto evita la actualización automática, pero permite el zoom iniciado por el usuario. (fuente)
Shawn Erquhart
11

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;" />
Johnpolacek
fuente
7

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.

fuente
4
La respuesta es utilizar 1 unidad predefinida para el texto (es decir, 12 puntos) y luego, para todas las definiciones CSS posteriores, utilice el tamaño de fuente: 90%; o tamaño de fuente: 110%; etc. Esto es más accesible para todos sus dispositivos compatibles.
1
Olvidaste lo más importante: REM (referencia EM). Puede usarlo en todo el documento y permanece igual (no está en cascada).
Andrew Swift
3
Esta respuesta no es relevante y no responde a la pregunta de ninguna manera. La pregunta era sobre textos del mismo tamaño que se representaban de manera diferente, no sobre qué unidades usar. El problema realmente permanece ahí independientemente de las unidades que se utilicen.
Rauli Rajande
0

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 %%.

me1974
fuente
El diseñador debería usar em para los tamaños de fuente de todos modos.
Nick Turner
2
... excepto en la etiqueta del cuerpo css donde es mejor un tamaño px.
Matt Parkins
0

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.

Marebuffi
fuente