desactivar la vista de zoom de iOS 10+ safari?

He actualizado mi iPhone 6 plus a la versión beta de iOS 10 y acabo de descubrir que en Safari móvil, puede hacer zoom en cualquier página web tocando dos veces o pellizca IGNORE el código user-scalable=no el user-scalable=no en la metaetiqueta. No sé si es un error o una característica. Si se considera una característica, ¿cómo inhabilitamos la ventana gráfica de zoom de iOS 10 safari?


actualizado en el lanzamiento de iOS 11, el safari de iOS 11 aún NO respeta la metaetiqueta de user-scalable=no meta.

sitio móvil github en Safari

    Es posible evitar el escalado de páginas web en iOS 10, pero va a requerir más trabajo de su parte. Supongo que el argumento es que un grado de dificultad debería evitar que los desarrolladores de cultos a la carga caigan “escalable por el usuario = no” en todas las tags de las ventanas y haciendo las cosas innecesariamente difíciles para los usuarios con problemas de visión.

    Aún así, me gustaría ver a Apple cambiar su implementación de modo que haya una forma simple (metaetiqueta) de deshabilitar el doble toque para acercar. La mayoría de las dificultades se relacionan con esa interacción.

    Puedes detener el pellizco para hacer zoom con algo como esto:

     document.addEventListener('touchmove', function (event) { if (event.scale !== 1) { event.preventDefault(); } }, false); 

    Tenga en cuenta que si algún objective más profundo llama a stopPropagation en el evento, el evento no llegará al documento y este escucha no evitará el comportamiento de escala.

    La desactivación del doble toque para acercar es similar. Desactiva cualquier toque en el documento que ocurra dentro de 300 milisegundos del toque anterior:

     var lastTouchEnd = 0; document.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd < = 300) { event.preventDefault(); } lastTouchEnd = now; }, false); 

    Si no configura los elementos de su formulario correctamente, al enfocar una entrada se hará un zoom automático y, dado que ha desactivado el zoom manual en su mayoría, ahora será casi imposible deshacer el zoom. Asegúrese de que el tamaño de la fuente de entrada sea> = 16px.

    Si está tratando de resolver esto en un WKWebView en una aplicación nativa, la solución dada arriba es viable, pero esta es una solución mejor: https://stackoverflow.com/a/31943976/661418 . Y como se menciona en otras respuestas, en iOS 10 beta 6, Apple ahora ha proporcionado una bandera para honrar a la metaetiqueta.

    Actualización de mayo de 2017: reemplacé el antiguo método de "control toca la longitud en touchstart" para deshabilitar el pellizco-zoom con un enfoque más simple de 'check event.scale on touchmove'. Debería ser más confiable para todos.

    Esta es una nueva característica en iOS 10.

    De las notas de la versión iOS 10 beta 1:

    • Para mejorar la accesibilidad en sitios web en Safari, los usuarios ahora pueden pellizcar para hacer zoom incluso cuando un sitio web configura user-scalable=no en la ventana gráfica.

    Espero que veamos un complemento de JS pronto para desactivar esto de alguna manera.

    Parece que este comportamiento se supone que cambió en la última versión beta, que en el momento de escribir es beta 6.

    De las notas de la versión para iOS 10 Beta 6:

    WKWebView ahora está predeterminado para respetar user-scalable=no desde una ventana gráfica. Los clientes de WKWebView pueden mejorar la accesibilidad y permitir a los usuarios pellizcar para hacer zoom en todas las páginas estableciendo que la propiedad ignoresViewportScaleLimits WKWebViewConfiguration ignoresViewportScaleLimits en YES .

    Sin embargo, en mi (muy limitada) prueba, aún no puedo confirmar que este sea el caso.

    Editar: verificado, iOS 10 Beta 6 respeta el user-scalable=no de forma predeterminada para mí.

    Pude arreglar esto usando la propiedad css de touch-action en elementos individuales. Intente establecer touch-action: manipulation; en elementos en los que comúnmente se hace clic, como enlaces o botones.

    Pasé aproximadamente una hora buscando una opción de javascript más robusta, y no encontré ninguna. Da la casualidad de que en los últimos días he estado jugando con hammer.js (Hammer.js es una biblioteca que te permite manipular todo tipo de eventos táctiles fácilmente) y sobre todo fallando en lo que estaba tratando de hacer.

    Con esa advertencia, y entendiendo que de ninguna manera soy un experto en JavaScript, esta es una solución que se me ocurrió que básicamente aprovecha hammer.js para capturar los eventos de pellizcar y acercar y hacer doble toque y luego registrarlos y descartarlos.

    Asegúrese de incluir hammer.js en su página y luego intente pegar este javascript en la cabeza en alguna parte:

     < script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script > < script type = "text/javascript" > // SPORK - block pinch-zoom to force use of tooltip zoom $(document).ready(function() { // the element you want to attach to, probably a wrapper for the page var myElement = document.getElementById('yourwrapperelement'); // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan var hammertime = new Hammer(myElement, { prevent_default: false, touchAction: "pan" }); // pinch is not enabled by default in hammer hammertime.get('pinch').set({ enable: true }); // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action hammertime.on('pinch pinchend pinchstart doubletap', function(e) { console.log('captured event:', e.type); e.preventDefault(); }) });  

    Intenté la respuesta anterior sobre pellizcar para hacer zoom

     document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); 

    sin embargo, en algún momento la pantalla sigue ampliándose cuando el evento .touches.length> 1 descubrí que la mejor manera es usar el evento touchmove, para evitar que cualquier dedo se mueva en la pantalla. El código será algo como esto:

     document.documentElement.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); 

    Espero que ayude

    Verifique el factor de escala en el evento touchove y luego evite el evento táctil.

     document.addEventListener('touchmove', function(event) { event = event.originalEvent || event; if(event.scale > 1) { event.preventDefault(); } }, false); 

    Podemos obtener todo lo que queremos inyectando una regla de estilo e interceptando eventos de zoom:

     $(function () { if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return $(document.head).append( '' ) $(window).on('gesturestart touchmove', function (evt) { if (evt.originalEvent.scale !== 1) { evt.originalEvent.preventDefault() document.body.style.transform = 'scale(1)' } }) }) 

    ✔ Desactiva el zoom pellizco.

    ✔ Desactiva el zoom de doble toque.

    ✔ El desplazamiento no se ve afectado.

    ✔ Desactiva el resaltado de pulsación (que se activa en iOS mediante la regla de estilo).

    AVISO: Ajuste la detección de iOS a su gusto. Más sobre eso aquí .


    Disculpas a lukejackson y Piotr Kowalski , cuyas respuestas aparecen en forma modificada en el código anterior.

    Se me ocurrió una solución bastante ingenua, pero parece funcionar. Mi objective era evitar que los dobles toques accidentales se interpretaran como acercar, mientras mantuve pellizcado para hacer zoom para el acceso.

    La idea es medir el tiempo entre el primer touchstart y el segundo touchend en un doble toque y luego interpretar el último touchend y hacer clic si el retraso es demasiado pequeño. Mientras se evita el zoom accidental, este método parece mantener el desplazamiento de la lista no afectado, lo cual es bueno. Sin embargo, no estoy seguro si no me he perdido nada.

     let preLastTouchStartAt = 0; let lastTouchStartAt = 0; const delay = 500; document.addEventListener('touchstart', () => { preLastTouchStartAt = lastTouchStartAt; lastTouchStartAt = +new Date(); }); document.addEventListener('touchend', (event) => { const touchEndAt = +new Date(); if (touchEndAt - preLastTouchStartAt < delay) { event.preventDefault(); event.target.click(); } }); 

    Inspirado por una esencia de mutewinter y la respuesta de Joseph .

    Por extraño que parezca, al menos para Safari en iOS 10.2, el doble toque para acercar se desactiva mágicamente si su elemento o cualquiera de sus antepasados ​​tiene uno de los siguientes:

    1. Un oyente onClick – puede ser un simple noop.
    2. Un cursor: pointer establecido en CSS

    Encontré este sencillo trabajo que parece evitar el doble clic para ampliar:

      // Convert touchend events to click events to work around an IOS 10 feature which prevents // developers from using disabling double click touch zoom (which we don't want). document.addEventListener('touchend', function (event) { event.preventDefault(); $(event.target).trigger('click'); }, false); 

    En mi caso particular, estoy usando Babylon.js para crear una escena 3D y toda mi página consiste en un canvas de pantalla completa. El motor 3D tiene su propia funcionalidad de zoom, pero en iOS el pellizco para acercarlo interfiere con eso. Actualicé la respuesta @Joseph para superar mi problema. Para desactivarlo, me di cuenta de que necesito pasar el {pasivo: falso} como una opción al oyente del evento. El siguiente código funciona para mí:

     window.addEventListener( "touchmove", function(event) { if (event.scale !== 1) { event.preventDefault(); } }, { passive: false } ); 

    Revisé todas las respuestas anteriores en la práctica con mi página en iOS (iPhone 6, iOS 10.0.2), pero sin éxito. Esta es mi solución de trabajo:

     $(window).bind('gesturestart touchmove', function(event) { event = event.originalEvent || event; if (event.scale !== 1) { event.preventDefault(); document.body.style.transform = 'scale(1)' } }); 

    El zoom involuntario tiende a suceder cuando:

    • Un usuario toca dos veces en un componente de la interfaz
    • Un usuario interactúa con la ventana gráfica usando dos o más dígitos (pellizco)

    Para evitar el comportamiento de doble toque , he encontrado dos soluciones muy simples:

       

    Ambos evitan que Safari (iOS 10.3.2) amplíe el botón. Como puede ver, uno es solo JavaScript, el otro es solo CSS. Usar apropiadamente.

    Aquí hay una demostración: https://codepen.io/lukejacksonn/pen/QMELXQ

    No he intentado evitar el comportamiento de pellizco (aún), principalmente porque tiendo a no crear interfaces multitáctiles para la web y, en segundo lugar, he llegado a la idea de que quizás todas las interfaces, incluida la interfaz de usuario nativa de la aplicación, deberían ser “pellizcar para acercar” -able en lugares. Todavía diseñaría para evitar que el usuario tenga que hacer esto para hacer que su UI sea accesible para ellos, cueste lo que cueste.

    La solución temporal que funciona en Mobile Safari en este momento de la escritura, es tener el tercer argumento en adddEventListener ser { passive: false } , por lo que la solución completa se ve así:

     document.addEventListener('touchmove', function (event) { if (event.scale !== 1) { event.preventDefault(); } }, { passive: false }); 

    Es posible que desee comprobar si las opciones son compatibles para permanecer compatible con versiones anteriores.