¿Deshabilitar el zoom de la ventana gráfica Safari iOS 10+?

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

actualizado en iOS 11/12, iOS 11 y iOS 12 safari todavía NO respetan la user-scalable=nometaetiqueta.

Es posible evitar el escalado de la página web en Safari en iOS 10, pero implicará más trabajo de su parte. Supongo que el argumento es que un cierto grado de dificultad debería evitar que los desarrolladores de culto de carga dejen "escalable por el usuario = no" en cada etiqueta de ventana gráfica y dificulten innecesariamente las cosas para los usuarios con discapacidad visual.

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

Puede detener pellizcar 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 objetivo más profundo llama a stopPropagation en el evento, el evento no alcanzará el documento y este escucha no impedirá el comportamiento de escala.

Deshabilitar el doble toque para hacer zoom es similar. Deshabilita cualquier toque en el documento que ocurra dentro de los 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 correctamente los elementos de su formulario, al enfocar en una entrada se aplicará un zoom automático, y dado que en su mayoría ha desactivado el zoom manual, ahora será casi imposible quitar 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 anteriormente es viable, pero esta es una mejor solución: 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 la metaetiqueta.

Actualización de mayo de 2017: reemplacé el antiguo método 'comprobar toques de longitud en el inicio táctil' para deshabilitar el pellizco-zoom con un enfoque más simple 'comprobar evento.escala en movimiento táctil'. Debería ser más confiable para todos.

Esta es una nueva característica en iOS 10.

De las notas de lanzamiento de iOS 10 beta 1:

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

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

He podido arreglar esto usando la touch-actionpropiedad css en elementos individuales. Intente configurar touch-action: manipulation;elementos en los que comúnmente se hace clic, como enlaces o botones.

Parece que este comportamiento supuestamente ha cambiado en la última versión beta, que al momento de escribir este artículo es beta 6.

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

WKWebViewahora por defecto respeta user-scalable=nodesde una ventana gráfica. Los clientes de WKWebViewpueden mejorar la accesibilidad y permitir a los usuarios pellizcar para hacer zoom en todas las páginas configurando la WKWebViewConfiguration propiedad ignoresViewportScaleLimitsen YES.

Sin embargo, en mis pruebas (muy limitadas), todavía no puedo confirmar que este sea el caso.

Editar: verificado, iOS 10 Beta 6 me respeta user-scalable=node manera predeterminada.

La solución que funciona en Safari Mobile en este momento de la escritura, es tener el tercer argumento a addEventListenersea { passive: false }, por lo que las miradas de solución completos como este:

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

Es posible que desee verificar si las opciones son compatibles para seguir siendo compatibles con versiones anteriores.

Pasé aproximadamente una hora buscando una opción de JavaScript más robusta, y no encontré una. 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 pinch-zoom y 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();
    })
  });
</script>

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 aún se amplía cuando event.touches.length> 1 descubrí que la mejor manera es usar el evento touchmove para evitar que se mueva un dedo 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 táctil 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(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Desactiva el zoom de pellizco.

✔ Desactiva el zoom de doble toque.

✔ El desplazamiento no se ve afectado.

✔ Desactiva el toque de resaltado (que se activa, en iOS, por la regla de estilo).

AVISO: modifique 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 objetivo era evitar que los doble toques accidentales se interpretaran como acercamiento, mientras mantenía el pellizco para hacer zoom trabajando para la accesibilidad.

La idea es medir el tiempo entre el primero touchstarty el segundo touchendcon un doble toque y luego interpretar el último touchendcomo un clic si el retraso es demasiado pequeño. Mientras evita el acercamiento accidental, este método parece mantener el desplazamiento de la lista sin verse 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 .

En mi caso particular, estoy usando Babylon.js para crear una escena 3D y toda mi página consta de un lienzo de pantalla completa. El motor 3D tiene su propia funcionalidad de zoom, pero en iOS la pizca de zoom interfiere con eso. Actualicé la respuesta de @Joseph para superar mi problema. Para deshabilitarlo, descubrí 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 }
);

Por extraño que parezca, al menos para Safari en iOS 10.2, tocar dos veces para hacer zoom está mágicamente desactivado si su elemento o alguno de sus antepasados ​​tiene uno de los siguientes:

1. Un oyente onClick: puede ser un simple noop.
2. Un cursor: pointerconjunto en CSS

El acercamiento involuntario tiende a ocurrir cuando:

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

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

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

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. Use apropiadamente.

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

No he intentado evitar el comportamiento de pellizco (todavía), 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 de la aplicación nativa, deberían ser "pellizcar para hacer zoom" -able en lugares. Todavía diseñaría para evitar que el usuario tenga que hacer esto para que su IU sea accesible para ellos, a toda costa.

Encontré este simple trabajo que parece evitar el doble clic para hacer zoom:

    // 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);

Según lo solicitado, he transferido mi comentario a una respuesta para que la gente pueda votarlo:

Esto funciona el 90% del tiempo para iOS 13:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

y

<meta name="HandheldFriendly" content="true">

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)'
    }
});

esto funcionó para mí:

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