10.03.2025

Desabilitando o Zoom no Mobile Safari: Configurações de Viewport Adequadas

Resposta Rápida

Se você deseja evitar o zoom no Mobile Safari, insira a seguinte tag na seção head do seu documento HTML:

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

Esta tag define a escala como 1.0, evitando assim que a página seja ampliada através do gesto de "pinçar" (esticando com dois dedos).

Evitando Armadilhas

Mesmo as soluções bem conhecidas podem eventualmente falhar. Aqui estão algumas dicas para ajudá-lo a evitar escalonamentos inesperados:

• Aspas: Todos os atributos em HTML devem estar envolvidos em aspas duplas corretas.
• Posicionamento de Atributos: Revise seu código para garantir que os atributos no valor content da meta tag estejam separados por vírgulas.
• Integridade do HTML: Verifique a validade do seu código usando um validador de HTML—uma ferramenta frequentemente subestimada por todo desenvolvedor!
• Consulta a Guias: Não se esqueça de consultar regularmente a documentação oficial da Apple, pois pode haver novas recomendações sobre o uso de tags meta de viewport.

iOS 10+? CSS para o Resgate!

Com o lançamento do iOS 10, a Apple começou a ignorar o valor user-scalable=no. Mas não desanime—você pode gerenciar o zoom usando a propriedade CSS touch-action.

Exemplo de uso de touch-action:

/* Permite limitar o zoom enquanto preserva o rolar */
element {
  touch-action: pan-x pan-y; 
}

Use a combinação pan-x pan-y para manter a rolagem em vez de touch-action: none.

Para desabilitar o escalonamento por pinçar com JavaScript:

// Previne eventos 'gesturestart' de escalonamento
document.addEventListener('gesturestart', function(event) {
  event.preventDefault();
});

Versões Antigas do iOS? Não Se Esqueça Delas!

Para versões do iOS 9 e anteriores, use event.preventDefault() em eventos touchmove.

/* Previne escalonamento através de 'touchmove' em versões mais antigas do iOS */
document.addEventListener('touchmove', function(event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Visualizando o Bloqueio de Viewport

Você pode associar o viewport no Mobile Safari a portões (🚪), e as tentativas dos usuários de dar zoom na página a uma fechadura (🔓).

Para garantir a "proteção," configuramos um bloqueio (🔒):

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

Visualizando Mudanças:

Portões Antes: 🚪🔓
Portões Depois: 🚪🔒

Elemento-chave: user-scalable=no atua como a chave (🔑) que tranca o acesso à função de zoom. 🔒📡

Recursos Úteis

1. Tags Meta Suportadas - Um guia detalhado da Apple sobre como configurar o viewport para o Mobile Safari.
2. Como Desabilitar o Zoom por Pinçar em Sites Móveis - Uma explicação aprofundada do processo para desabilitar o escalonamento em aplicações web móveis.
3. Design Web Responsivo – A List Apart - Uma exploração minuciosa dos princípios do design web responsivo, com o objetivo de proporcionar uma experiência de usuário contínua sem escalonamentos inesperados.
4. A Tag <meta name="viewport"> Sem Atributos de Largura ou Escala Inicial - Conselhos dos desenvolvedores do Chrome sobre como a configuração do viewport afeta o comportamento do Mobile Safari.
5. Módulo de Adaptação de Dispositivos CSS Nível 1 - Uma descrição exaustiva e padrões do consórcio W3C focando no conceito de 'viewport' e sua importância no design responsivo.

Video

Navigation