ios - desactivar - cómo quitar el zoom de la pantalla de mi iphone

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

Question

He actualizado 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 código user-scalable=no el user-scalable=no có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 la ventana gráfica iOS 10 safari?

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

Answer 1

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 "pellizcar para hacer zoom" -able en lugares. Todavía diseñaría para evitar que el usuario tenga que hacer esto para hacer que su IU sea accesible para ellos, a toda costa.

Answer 2

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

Answer 3

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

Answer 4

Es posible evitar el escalamiento 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 evitará 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 ha deshabilitado en su mayoría 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://.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 ''verificar evento.escala en el movimiento táctil''. Debería ser más confiable para todos.

Answer 5

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 establece user-scalable=no en la ventana gráfica.

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

Answer 6

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

Answer 7

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 todavía 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.

Answer 8

La solución alternativa que funciona en Mobile Safari en este momento de escritura es que el tercer argumento en addEventListener sea { passive: false } , de modo que la solución completa se vea así:

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.

Answer 9

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:

WKWebView ahora por defecto respeta 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 configurando la propiedad ignoresViewportScaleLimits WKWebViewConfiguration ignoresViewportScaleLimits en YES .

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

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

Answer 10

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>

Answer 11

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 pellizco de zoom.

✔ 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 here .

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

Answer 12

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 ​​tienen uno de los siguientes:

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

Answer 13

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

Answer 14

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 primer touchstart y el segundo touchend con un doble toque y luego interpretar el último touchend como 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 .

Answer 15

Si nada de lo anterior funciona para usted, simplemente establecer el tamaño de fuente en el cuadro a 16px resolverá el problema.

Answer 16

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

Answer 17

esto funcionó para mí:

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