Deshabilitar el auto zoom en campos de entrada en iOS

En dispositivos móviles con iOS (iphone o ipad), al presionar en un elemento INPUT, tipo text o search (cuadro de busqueda) o un elemento select, automaticamente se aumenta dicho elemento al mostrarse el teclado en pantalla, desajustandose la pagina al viewport y asi permanece hasta que recarguemos o que reduzcamos el zoom manualmente.
Esto sucede cuando la fuente del elemento es menor de 16 px.

Evitar y desactivar el auto zoom en dispositivos con iOS

El auto zoom se puede deshabilitar y solucionar esta situacion de tres formas:

1- No escalar la pagina, agregando la siguiente etiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Este método no se recomienda, porque entonces el usuario no puede hacer zoom en ningún área de la página.

2- Forzando el tamaño del texto del elemento de la siguiente forma:

input, input:active, input:focus, input:focus-within, input:hover, input:visited {
    font-size: 16px!important;
}

Efectivo, pero solo funciona en el navegador Google Chrome y no en Safari.

3- Deshabilitar el auto zoom en el focus de campos de entrada (text), select y textarea.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	select:focus,
	textarea:focus,
	input:focus {
		font-size: 16px;
	}
}

Esta es la mejor solución y la que uso en los cuadros de búsqueda de este sitio.



Comparte

Sígueme en las redes sociales