Desarrollando una web para un cliente nos surgió una incidencia bastante curiosa: algunos campos de textos (input) al colocarse encima de ellos (focus) hacían auto zoom en dispositivos iOS (iPhone - iPad) usando el navegador Safari.
Este auto zoom sólo lo hace cuando el campo de texto (input) tiene un tamaño de fuente (font-size) menor de 16px.
Buscando información encontramos varias soluciones.
La más lógica y la que usamos nosotros es no bajar de 16px los campos de texto. Al fin y al cabo, el auto zoom se produce por que el dispositivo reconoce que es un tamaño pequeño y por cuestiones de accesibilidad y usabilidad hace zoom. Además cumplimos con una de las recomendaciones de usabilidad la cual recomienda un tamaño mínimo de 16px en todos los textos cuando desarrollamos una web para móviles.
Otra solución (que no recomendamos ya que sería muy perjudicial para la accesibilidad y usabilidad) es desactivar el zoom de la página a través de la etiqueta meta name="viewport" y las propiedades user-scalable y/o maximum-scale.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Por último, si necesitamos implementar en nuestra maquetación campos de texto con tamaños de texto menores de 16px podemos utilizar la solución que nos plantea jakob-e en su codepen la cual establece un tamaño de 16px y a través de la propiedad transform escala y ajusta los espacios en blanco derivados del escalado.
See the Pen Disable iOS input zoom (CSS only) by jakob-e (@jakob-e) on CodePen.
Entradas
No hay comentarios:
Publicar un comentario