¿desactivar el zoom de la ventana gráfica de iOS 10+ safari?

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


actualizado en la versión de iOS 11/12, safari de iOS 11 y iOS 12 todavía NO respeta la etiqueta meta user-scalable=no.

It's posible para evitar la escala de la página web en Safari en iOS 10, pero it's va a implicar más trabajo de su parte. Supongo que el argumento es que un grado de dificultad debe evitar que los desarrolladores de carga de la caída "user-scalable = no" en cada etiqueta de vista y hacer las cosas innecesariamente difícil para los usuarios con problemas de visión.

Aun así, me gustaría que Apple cambiara su implementación para que haya una forma sencilla (meta-tag) de desactivar el doble toque para hacer zoom. La mayoría de las dificultades están relacionadas con esa interacción.

Se puede detener el pellizco para hacer zoom con algo como esto:

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

Ten en cuenta que si algún objetivo más profundo llama a stopPropagation en el evento, el evento no llegará al documento y el comportamiento de escalado no será impedido por este listener.

Desactivar el doble toque para hacer zoom es similar. Se desactiva 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 = 16px.

Si usted' 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 ha proporcionado una bandera para honrar la etiqueta meta.

**Actualización de mayo de 2017:** He sustituido el antiguo 'comprobar la longitud de los toques en touchstart' método de desactivación de pellizco-zoom con un más simple 'comprobar event.scale en touchmove' enfoque. Debería ser más fiable para todos.
Comentarios (16)

Esta es una nueva función de iOS 10.

*De las notas de la versión beta 1 de iOS 10 Para mejorar la accesibilidad en los sitios web en Safari, los usuarios pueden ahora pellizcar para hacer zoom incluso cuando un sitio web establece user-scalable=no en la ventana gráfica.

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

Comentarios (20)

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

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

Ahora WKWebView respeta por defecto 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 la propiedad WKWebViewConfiguration. a la propiedad ignoresViewportScaleLimits como YES.

Sin embargo, en mis pruebas (muy limitadas), todavía no puedo confirmar que esto sea así.

Edición: verificado, iOS 10 Beta 6 respeta user-scalable=no por defecto para mí.

Comentarios (4)