Esto fue un gran “Hoy aprendí” para mí de Josh W. Comeau. Si el font-size de una <input> tiene 16 píxeles o más, Safari en iOS se enfocará en la entrada normalmente. Pero tan pronto como el font-size es de 15px o menos, la ventana gráfica se acercará a esa entrada. Presumiblemente, porque considera que ese tipo es demasiado pequeño y quiere que vea lo que está haciendo. Entonces se acerca para ayudarte. Accesibilidad. Si no quieres eso, haz la fuente lo suficientemente grande.
🔥 Set your form inputs to have a font-size of 1rem (16px) or larger to prevent iOS Safari from automatically zooming in when tapped.
Makes such a big difference from a UX perspective! pic.twitter.com/6UpicwMaWE
— Josh W. Comeau (@JoshWComeau) April 7, 2021
Aquí está el bolígrafo exacto de Josh si quieres jugar tú mismo.
En general, diría que me gusta esta función. Ayuda a las personas a ver lo que están haciendo y desalienta los tamaños de letra muy pequeños. Lo que es un pequeño fastidio, y realmente no culpo a nadie aquí, es que no todos los tipos de letra se crean de la misma manera en términos de legibilidad en diferentes tamaños. Por ejemplo, aquí está San Francisco versus Caveat a 16px.
San Francisco a la izquierda, Cavet a la derecha. La advertencia parece visualmente mucho más pequeña a pesar de que el font-size es el mismo.
Puede ver ese ejemplo en el modo de depuración para verlo usted mismo y cambiar el tamaño de fuente para ver qué hace zoom y qué no.