Pasé todo el día buscando una solución, y este sitio sigue apareciendo, así que ¿por qué no les pregunto a ustedes?
Estoy construyendo el sitio web móvil de nuestra empresa y queremos deshabilitar el zoom automático que usan los dispositivos móviles para acercar las entradas de texto/búsqueda/correo electrónico cuando están enfocadas. Estoy creando el sitio en HTML5 y he visto/probado la solución <meta name="viewport" content="width=device-width, user-scalable=no" /> . Con varias propiedades (es decir, escala mínima = #, escala máxima = #") Esto funciona en casi TODOS los dispositivos móviles en los que estoy probando. Solo un problema. Quiero que el usuario pueda acercar/alejar en su ocio (tenemos algunas tomas de productos de mayor resolución que sería bueno ver de cerca)
¿Cómo puedo deshabilitar el acercamiento al hacer clic en las etiquetas de entrada, mientras mantengo el control manual completo del zoom del usuario?
ps el sitio también usa jQuery. Entonces, cualquier pensamiento que use eso podría ayudar.
gracias jrak
Establecer la metaetiqueta en <head> así funcionó para mí:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">Puede que no funcione exactamente para su estilo, pero si establece el tamaño de fuente de los elementos de entrada en 16 px o más, el zoom de enfoque se detendrá.
Consulte: Deshabilitar el zoom automático en la etiqueta "Texto" de entrada - Safari en iPhone
No hay una manera limpia que pueda encontrar, pero aquí hay un truco...
1) Me di cuenta de que el evento de mouseover ocurre antes del zoom, pero el zoom ocurre antes de los eventos de mousedown o focus.
2) Puede cambiar dinámicamente la etiqueta de la ventana gráfica META usando javascript (consulte ¿Habilitar/deshabilitar el zoom en el safari de iPhone con Javascript? )
Entonces, intente esto (que 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 el mouseover/down no siempre detecte entradas/salidas, pero funcionó bien en mis pruebas y es un comienzo sólido.