jquery - avoid - input zoom mobile
Deshabilitar zoom automático/zoom de campo en etiquetas de entrada en mi sitio móvil-SIN desactivar todas las funciones de zoom (6)
Establecer la metaetiqueta en <head> como esto funcionó para mí:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
He pasado todo el día buscando una solución, y este sitio sigue apareciendo, así que por qué no les pregunto chicos.
Construyo nuestro sitio web móvil para empresas y deseamos desactivar el uso automático de los dispositivos con zoom para acercar las entradas de texto / búsqueda / correo electrónico cuando están enfocadas. Estoy construyendo el sitio en HTML5 y he visto / probado la <meta name="viewport" content="width=device-width, user-scalable=no" /> solution. Con varias propiedades (es decir, minimum-scale = #, maximum-scale = # ") Esto funciona en casi TODOS los dispositivos móviles en los que estoy probando. Solo un problema. Quiero que el usuario pueda hacer zoom in / out en su ocio. (tenemos algunas tomas de producto de mayor resolución que sería bueno ver de cerca)
¿Cómo puedo deshabilitar el acercamiento cuando hago clic en las etiquetas de entrada, mientras mantengo el control de zoom manual completo del usuario?
ps el sitio también usa jQuery. Entonces, cualquier pensamiento que use eso podría ayudar.
gracias Jrak
Me tomó un tiempo encontrarlo, pero este es el mejor código que encontré ... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
var $viewportMeta = $(''meta[name="viewport"]'');
$(''input, select, textarea'').bind(''focus blur'', function(event) {
$viewportMeta.attr(''content'', ''width=device-width,initial-scale=1,maximum-scale='' + (event.type == ''blur'' ? 10 : 1));
});
Puede que no funcione exactamente para su estilo, pero si establece que el tamaño de fuente de los elementos de entrada sea de 16px o superior, el zoom en el enfoque se detendrá.
Si configura una transformación de webkit a cualquier valor que no sea 1 (o 1.0), entonces la función de zoom automático al seleccionar una etiqueta de entrada está desactivada en el iPhone.
document.body.style.webkitTransformOrigin= "0% 0%";
document.body.style.webkitTransform = "scale(1.1)";
No he probado otros navegadores móviles.
Ver: Desactivar zoom automático en la etiqueta de entrada "Texto" - Safari en iPhone
No hay una manera limpia que podría encontrar, pero aquí hay un truco ...
1) Noté que el evento mouseover ocurre antes del zoom, pero el zoom ocurre antes de mousedown o focus events.
2) Puede cambiar dinámicamente la etiqueta de la ventana META utilizando javascript (consulte Activar / desactivar el zoom en el safari de iPhone con Javascript? )
Por lo tanto, intente esto (se muestra en jquery para compacidad):
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$(''head meta[name=viewport]'').remove();
$(''head'').prepend(''<meta name="viewport" content="user-scalable=0" />'');
}
function zoomEnable(){
$(''head meta[name=viewport]'').remove();
$(''head'').prepend(''<meta name="viewport" content="user-scalable=1" />'');
}
Esto es definitivamente un truco ... puede haber situaciones en las que mouseover / down no siempre capta entradas / salidas, pero funcionó bien en mis pruebas y es un comienzo sólido.
un truco muy simple es establecer:
input, textarea {font-size:16px;}