06.03.2025

Desativando o Zoom por Toque Duplo em Dispositivos

Resposta Rápida

Para desativar a função de zoom ao tocar duas vezes, utilize o estilo CSS touch-action: manipulation;. Isso bloqueará o zoom ao toque duplo, mas não afetará a funcionalidade de pinça para zoom:

* {
    touch-action: manipulation; /* desabilita o zoom por toque duplo */
}

Essa regra pode ser aplicada a todos os elementos (*) ou a elementos específicos, garantindo uma experiência interativa suave, sem zoom indesejado.

Para desabilitar completamente o zoom em dispositivos de toque, adicione o atributo user-scalable=no à tag viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Separando Elementos Usando Classes CSS

Você pode personalizar o comportamento de elementos específicos controlando a sua capacidade de zoom. Para desabilitar o zoom em elementos específicos, atribua a classe disable-dbl-tap-zoom a eles:

.disable-dbl-tap-zoom {
    touch-action: manipulation; /* zoom está desabilitado */
}

Essa classe é especialmente relevante para botões, widgets interativos ou elementos que exigem atenção especial.

Usando jQuery para Bloquear o Zoom

Se o seu elemento for interativo e você quiser evitar o zoom ao toque duplo, implemente o seguinte código jQuery:

$('.disable-dbl-tap-zoom').on('touchend', function(e) {
    var $this = $(this);
    if ($this.data('lastTouch') && e.timeStamp - $this.data('lastTouch') < 500) {
        e.preventDefault(); /* evita o toque duplo */
    }
    $this.data('lastTouch', e.timeStamp);
});

Esse código bloqueia toques duplos se ocorrerem dentro de um intervalo de 500 milissegundos, evitando assim o zoom indesejado.

Garantindo uma Experiência Confortável para o Usuário em Todos os Dispositivos

Ao criar um site, é crucial garantir seu funcionamento adequado em todos os tipos de dispositivos. Preste atenção especial à compatibilidade do navegador e à qualidade da experiência do usuário. Não se esqueça de testar em diversos dispositivos para identificar problemas de renderização.

Redução de Zoom e Experiência do Usuário

Lembre-se de que bloquear a função de zoom pode impactar a usabilidade do site. O zoom não deve ser desconsiderado, e é melhor habilitá-lo onde ele melhora a navegação no site. Evite situações em que um zoom acidental possa prejudicar a impressão de interação com a interface.

Visualização

Interagir com uma tela sensível ao toque pode ser comparado a movimentos de dança:

Toque duplo para zoom: 💃🕺 ↔️ 💃🕺 (os dançarinos se aproximam repentinamente)
Desativando: 💃    🕺 (os dançarinos mantêm uma certa distância)

Controlar o zoom é uma arte que permite gerenciar a "dança" dos elementos em seu site.

Criando Regras Únicas para Bloquear o Zoom Usando CSS

Às vezes, é útil usar gestos do navegador enquanto adiciona um pouco de personalidade. A propriedade touch-action permite definir quais gestos estarão ativos e quais serão desativados:

.card {
    touch-action: pan-x pan-y; /* panning é permitido, mas o zoom é bloqueado */
}

Use esta propriedade para que os usuários possam deslizar as cartas enquanto eliminam o zoom acidental.

Lembrando: iOS vs. Android

O comportamento das páginas web pode diferir entre plataformas. Portanto, certifique-se de testar sua solução tanto no iOS quanto no Android para garantir sua estabilidade.

Aviso Sobre Toques Duplos Usando Eventos Personalizados

Se o toque duplo continuar acionando o zoom, você pode usar um atraso temporário:

let lastTap = 0;
element.addEventListener('touchend', function(event) {
    let currentTime = new Date().getTime();
    let tapLength = currentTime - lastTap;
    if (tapLength < 300 && tapLength > 0) {
        event.preventDefault(); // alerta sobre o possível toque duplo
    }
    lastTap = currentTime;
});

Essa abordagem ajuda a evitar o zoom durante toques duplos rápidos.

Recursos Úteis

1. Eventos de Toque - Web API | MDN — Guia sobre como lidar com eventos de toque na API.
2. Desativar zoom por toque duplo em dispositivos de toque - Stack Overflow — Discussão sobre problemas de zoom durante toques duplos no Stack Overflow.
3. Eventos de Toque — Recomendações do W3C para gerenciar eventos de toque.
4. Atraso do Toque de 300ms Eliminado | Blog | Chrome para Desenvolvedores — Dicas do Google sobre como otimizar o manuseio de eventos de toque.
5. Truque das Unidades de Viewport em Dispositivos Móveis | CSS-Tricks — Um artigo sobre como trabalhar com unidades de viewport em dispositivos móveis do CSS-Tricks.
6. Novas Políticas de Vídeo para iOS | WebKit — Discussão sobre mudanças nas políticas do WebKit em relação à reprodução e interação de vídeo no iOS.

Video

Navigation