Cómo quitar el zoom del viewport en Android

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

Comentario de José Loguercio Silva - 08 de Agosto de 2013 - 21:26
Existe otra solución que por lo menos me funciona perfecto en una Tablet Funtek con Android 4.0 webBrowser Dolphin HD <meta content='True' name='HandheldFriendly' /> <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> <meta name="viewport" content="width=device-width" /> Espero les Sirva ... Saludos desde Perú
Comentario de cesar augusto tabares puerta - 07 de Noviembre de 2013 - 14:29
si me sirve mucho, se me desactiva el zoom pero se pierde la adaptacion para cuando giro mi tablet de modo ancho, que debo hacer? .. necesito quitar zoom y que se me ajuste de la manera que yo lo quiera usar.
Comentario de Fernando - 14 de Febrero de 2014 - 23:01
Perfecto, gracias sirve en una tablet Genesis con Android 4.0
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí