Ayúdenme a entender el tamaño del texto de Safari móvil

Question

Mobile Safari cambia el tamaño del texto de forma predeterminada, incluidos los elementos <h1> y <h2>. He buscado SO para ver cómo podía evitar eso y encontré preguntas como las siguientes:

Font size issue with iPhone

Preventing iPhone scaling when rotated

font size change after orientation screen change to horizontal

en cuenta que la respuesta a todas ellas es la propiedad CSS:

-webkit-text-size-adjust:none; 

Esto funciona muy bien para mantener el tamaño de texto relativo entre el encabezado y d elementos de párrafo en Safari móvil. Sin embargo, me encontré con un post titulado ahora Beware of -webkit-text-size-adjust:none:

Lo que hace es evitar que los navegadores basados ​​en WebKit de cambiar el tamaño de texto. Ni siquiera el zoom de página completa cambia el tamaño del texto. Ahora, ¿cómo puede evitar que sus usuarios redimensionen el texto sea una buena idea?

De acuerdo con Safari CSS Reference (JavaScript required) de Apple, -webkit-text-size-adjust "Especifica un ajuste de tamaño para mostrar contenido de texto en Safari en iOS".

Cuando se le asigna un valor de "ninguno", la documentación especifica que "El tamaño del texto no está ajustado".

Ahora, tomé la descripción de la propiedad en el sentido de que el tamaño del texto relativo no se ajustará automáticamente, no es que el tamaño del texto no puede ser ajustado por el usuario, pero el autor dice que sus programas de pruebas ese texto no se puede ajustar en los navegadores basados ​​en WebKit cuando se especifica un valor de 'ninguno'.

(Actualmente estoy en una posición en la que soy incapaz de verificar esto en absoluto, pero yo voy a asumir que él y otros que hacen el reclamo son correctos.)

Así que mi pregunta es la siguiente: ¿cómo puede ¿uno gana control sobre el tamaño de texto relativo entre encabezados y párrafos en Safari móvil sin sacrificar la accesibilidad?

Answer 1

La cuestión clave aquí, según tengo entendido, es cuando esta regla se aplica por sí misma, porque cuando el valor es 'ninguno' se aplica a cualquier navegador webkit, ya sea de escritorio, de tamaño de teléfono o tableta. Los navegadores web de escritorio no aplican ningún otro valor, por lo que puedo decir (-webkit-font-size-adjust: 150%; no hace nada).

Cuando 'ninguno' se aplica a Mobile Safari en iOS, o cualquier navegador Webkit móvil (Android, etc.), obtienes lo que parece ser el efecto 'correcto': el navegador no intenta ajustar el tamaño de la fuente de algunos de sus elementos, y usted (el diseñador) mantiene el control de sus tamaños relativos entre sí. Todavía puede pellizcar/acercar y hacer doble clic en el zoom para acercar/alejar la vista. Los navegadores móviles hacen escala en las ventanas gráficas, no en escala de texto.

Sin embargo, cuando esta regla se aplica al webkit de escritorio (Safari, Chrome), se siente mal, porque el webkit de escritorio sí lo hace, y esta regla impide que eso suceda.

Entonces, la solución es apuntar solo al webkit móvil para esta regla.consultas de medios CSS son la respuesta lógica para esto, pero la gestión para dirigirse a todos los dispositivos IOS es un poco torpe e imprecisa:

@media screen and (max-device-width: 480px), 
     screen and (-webkit-min-device-pixel-ratio: 2), 
     screen and (device-width: 768px) { 
    body { 
    -webkit-text-size-adjust:none; 
    } 
} 

Esto debe conseguir que todos los iPhones hasta el 3GS (primera regla), el iPhone 4 (segunda regla) y iPad (3ra regla). La tercera regla debería coincidir teóricamente con Safari de escritorio también cuando la ventana gráfica tiene exactamente 768 px de ancho, pero no parece funcionar en la práctica.

Para ser sincero, no estoy seguro de que no sería mejor usar javascript para detectar Safari móvil y agregar una clase al cuerpo del documento para aplicar la regla. De esta forma, no necesitará volver a ajustar las nuevas reglas cuando salgan dispositivos con pantallas nuevas.

Answer 2

Haga una pausa para considerar por qué Mobile Safari podría querer cambiar el tamaño de su texto. Mobile Safari (como Chrome para Android, Mobile Firefox e IE Mobile) aumenta el tamaño de fuente de los bloques anchos, de modo que si hace doble clic para acercar ese bloque (que se ajusta al ancho de la pantalla), el texto será legible. Si configura -webkit-text-size-adjust: 100% (o none), no podrá hacerlo, por lo que cuando un usuario hace doble clic para ampliar bloques anchos, el texto será ilegiblemente pequeño; los usuarios podrán leerlo si pellizcan, pero luego el texto será más ancho que la pantalla y tendrán que moverse horizontalmente para leer cada línea de texto.

He enumerado posibles formas de solucionar esto en an earlier answer.

Answer 3

Parece que hubo un error de paréntesis en la respuesta aceptada, haciendo que esto no funcione en modo horizontal.

Aquí es una versión corregida:

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2), screen and (device-width: 768px) { 
    body {-webkit-text-size-adjust:none;} 
}