Por diferentes motivos, a veces surge el requerimiento de que el usuario no pueda hacer zoom en la página. Ahora bien, esto se podría solucionar de forma fácil con la etiqueta 'viewport' si Android no tuviera un bug con el parametro 'user-scalable'. Para deshabilitar el zoom de los elementos input en iOS tan solo hay que utilizar la siguiente etiqueta meta viewport con el contenido (content):
width=1280, user-scalable=no
El caso de Android es diferente ya que no funciona dicho parametro de escalado del usuario, ni con valor a 0. Y al estar cambiandole la anchura al viewport, tampoco nos sirve jugar con los parametros de 'initial-scale', ni 'minimum-scale', ni 'maximum-scale'.
La solución consiste en introducir un evento a los 'input' por javascript para que cuando dichos 'input' cambien de valor, entonces podamos recuperar el zoom predeterminado que teníamos al principio. Esto se hace eliminando el viewport actual, añadiendo un viewport con la anchura del dispositivo, volviendo a eliminar dicho viewport y ya añadiendo finalmente el viewport que teníamos inicialmente.
$("head meta[name='viewport']").remove();
$("head").prepend('codigo_viewport_con_anchura_del_dispositivo');
$("head meta[name='viewport']").remove();
$("head").prepend('codigo_viewport_inicial_sin_el_user_scalable');
Este código javascript (hemos utilizado jQuery también) se debe colocar en el evento 'change' de los input (podemos utilizar el selector ':input' de jQuery). De esta manera se recupera el zoom tras la introducción de datos en un elemento de formulario, en páginas cuyo usuario no puede hacerlo manualmente.
Comentarios