desativar viewport com zoom no iOS 10+ safari?

Atualizei meu iPhone 6 plus para a versão beta do iOS 10 e acabei de descobrir que, no safari para celular, você pode ampliar qualquer página da web tocando duas vezes ou beliscando IGNORAR o user-scalable=nocódigo na metatag. Não sei se é um bug ou recurso. Se for considerado um recurso, como desativar a janela de visualização com zoom no safari do iOS 10?

atualizado na versão iOS 11/12, o safari iOS 11 e iOS 12 ainda NÃO respeita a user-scalable=nometatag.

É possível impedir o dimensionamento de páginas da Web no safari no iOS 10, mas isso envolverá mais trabalho da sua parte. Acho que o argumento é que um certo grau de dificuldade deve impedir que os desenvolvedores de cultos de carga largem "user-scalable = no" em todas as tags de viewport e dificultem desnecessariamente as coisas para usuários com deficiência visual.

Ainda assim, eu gostaria que a Apple mudasse sua implementação para que houvesse uma maneira simples (meta-tag) de desativar o toque duplo no zoom. A maioria das dificuldades está relacionada a essa interação.

Você pode parar de beliscar para ampliar com algo assim:

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

Observe que, se algum destino mais profundo chamar stopPropagation no evento, o evento não alcançará o documento e o comportamento da escala não será impedido por esse ouvinte.

Desativar o toque duplo para ampliar é semelhante. Você desativa qualquer toque no documento que ocorre dentro de 300 milissegundos do toque anterior:

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

Se você não configurar corretamente os elementos do formulário, o foco em uma entrada será ampliado automaticamente e, como você desativou o zoom manual, agora será quase impossível descompactar. Verifique se o tamanho da fonte de entrada é> = 16px.

Se você está tentando resolver isso em um WKWebView em um aplicativo nativo, a solução fornecida acima é viável, mas é uma solução melhor: https://stackoverflow.com/a/31943976/661418 . E, como mencionado em outras respostas, no iOS 10 beta 6, a Apple agora forneceu uma bandeira para honrar a metatag.

Atualização em maio de 2017: substituí o antigo método 'check toches length on touchstart' de desativar o zoom de pitada por uma abordagem mais simples do 'check event.scale on touchmove'. Deve ser mais confiável para todos.

Este é um novo recurso do iOS 10.

Nas notas de versão do iOS 10 beta 1:

• Para melhorar a acessibilidade em sites no Safari, os usuários agora podem aumentar o zoom, mesmo quando um site é definido user-scalable=nona janela de exibição.

Espero que em breve vejamos um complemento JS para desativá-lo de alguma forma.

Consegui consertar isso usando a touch-actionpropriedade css em elementos individuais. Tente definir touch-action: manipulation;elementos nos quais geralmente são clicados, como links ou botões.

Parece que esse comportamento foi supostamente alterado na versão beta mais recente, que no momento da redação é a versão 6.

Nas notas de versão do iOS 10 Beta 6:

WKWebViewagora o padrão é respeitar a user-scalable=nopartir de uma viewport. Clientes de WKWebViewpode melhorar a acessibilidade e permitir que os usuários de beliscar-a-zoom em todas as páginas, definindo a WKWebViewConfiguration propriedade ignoresViewportScaleLimitspara YES.

No entanto, nos meus testes (muito limitados), ainda não posso confirmar que este é o caso.

Editar: verificado, o iOS 10 Beta 6 respeita user-scalable=nopor padrão para mim.

A solução que funciona em Mobile Safari no momento da escrita, é ter o terceiro argumento a addEventListenerseja { passive: false }, de modo a aparência de solução completa como este:

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

Convém verificar se há opções compatíveis para permanecer compatível com versões anteriores.

Passei cerca de uma hora procurando uma opção javascript mais robusta e não encontrei uma. Acontece que, nos últimos dias, estive brincando com o hammer.js (Hammer.js é uma biblioteca que permite manipular todos os tipos de eventos de toque com facilidade) e falhando principalmente com o que eu estava tentando fazer.

Com essa ressalva, e entendendo que eu não sou especialista em javascript, esta é uma solução que eu criei que basicamente utiliza o hammer.js para capturar os eventos de pinch-zoom e toque duas vezes e depois registrá-los e descartá-los.

Certifique-se de incluir hammer.js em sua página e tente colocar esse javascript na cabeça em algum lugar:

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

Eu tentei a resposta anterior sobre pitada de zoom

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

no entanto, em algum momento a tela ainda é ampliada quando o evento.touches.length> 1 Eu descobri a melhor maneira de usar o evento touchmove, para evitar qualquer movimento do dedo na tela. O código será algo como isto:

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

Espero que ajude.

Verifique o fator de escala no evento touchove e evite o evento touch.

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

Podemos obter tudo o que queremos injetando uma regra 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)'
    }
  })
})

✔ Desativa o zoom de pitada.

✔ Desativa o toque duplo do zoom.

✔ A rolagem não é afetada.

✔ Desativa o toque em destaque (que é acionado, no iOS, pela regra de estilo).

AVISO: ajuste a detecção do iOS ao seu gosto. Mais sobre isso aqui .

Desculpas a lukejackson e Piotr Kowalski , cujas respostas aparecem na forma modificada no código acima.

Eu vim com uma solução bastante ingênua, mas parece funcionar. Meu objetivo era impedir que os toques duplos acidentais fossem interpretados como aumentar o zoom, mantendo a pressão para aumentar o zoom para garantir a acessibilidade.

A idéia é medir o tempo entre o primeiro touchstarte o segundo touchendem um toque duplo e depois interpretar o último touchendcomo clique, se o atraso for muito pequeno. Embora evite o zoom acidental, esse método parece manter a rolagem da lista inalterada, o que é bom. Não tenho certeza se não perdi 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 uma essência de mutewinter e a resposta de Joseph .

No meu caso particular, estou usando o Babylon.js para criar uma cena 3D e toda a minha página consiste em uma tela em tela cheia. O mecanismo 3D tem sua própria funcionalidade de zoom, mas no iOS a pressão do zoom interfere nisso. Atualizei a resposta @ Joseph para superar meu problema. Para desativá-lo, descobri que preciso passar o {passive: false} como uma opção para o ouvinte de eventos. O código a seguir funciona para mim:

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

Por mais estranho que pareça, pelo menos para o Safari no iOS 10.2, toque duas vezes para ampliar será desativado magicamente se o seu elemento ou qualquer um de seus ancestrais tiver um dos seguintes:

1. Um ouvinte onClick - pode ser um noop simples.
2. Um cursor: pointerconjunto em CSS

O zoom não intencional tende a acontecer quando:

• Um usuário toca duas vezes em um componente da interface
• Um usuário interage com a viewport usando dois ou mais dígitos (pitada)

Para impedir a comportamento de toque duplo , encontrei duas soluções simples:

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

Ambos impedem o Safari (iOS 10.3.2) de aumentar o zoom no botão. Como você pode ver, um é apenas JavaScript, o outro é apenas CSS. Use apropriadamente.

Aqui está uma demonstração: https://codepen.io/lukejacksonn/pen/QMELXQ

Ainda não tentei impedir o comportamento de pitada, principalmente porque não costumo criar interfaces de toque múltiplo para a Web e, em segundo lugar, cheguei à ideia de que talvez todas as interfaces, incluindo a interface do usuário do aplicativo nativo, devam ser "pitada de zoom" -able em alguns lugares. Eu ainda projetar para evitar que o usuário ter que fazer isso para tornar a sua interface acessível a eles, a todo o custo.

Encontrou este trabalho simples em torno do qual parece impedir o clique duplo para aumentar o 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);

Conforme solicitado, transferi meu comentário para uma resposta, para que as pessoas possam votar novamente:

Isso funciona 90% do tempo para o 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" />

e

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

Verifiquei todas as respostas acima na prática com minha página no iOS (iPhone 6, iOS 10.0.2), mas sem sucesso. Esta é a minha solução de trabalho:

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

isso funcionou para mim:

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