¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

2.11.21

Desactivar o evitar auto zoom de los campos de texto input en Safari Dispositivos iOS (iPhone - Ipad)


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.

No hay comentarios:

Publicar un comentario