Sobre este problema HTML
Quando define user-scalable=no na sua meta tag viewport, o navegador desativa completamente o pinch-to-zoom e outros gestos de ampliação em dispositivos móveis. Da mesma forma, definir maximum-scale=1 (ou qualquer valor baixo) limita até que ponto um utilizador pode fazer zoom, efetivamente impedindo-o de aumentar o conteúdo. Embora os programadores por vezes usem estes valores para criar uma experiência “semelhante a uma app” ou prevenir problemas de layout durante o zoom, eles violam diretamente as boas práticas de acessibilidade.
Porque isto é um problema
Acessibilidade
As Web Content Accessibility Guidelines (WCAG) Critério de Sucesso 1.4.4 (Redimensionar Texto) requer que o texto possa ser redimensionado até 200% sem perda de conteúdo ou funcionalidade. Prevenir o zoom torna impossível para utilizadores com baixa visão, deficiências cognitivas ou motoras interagirem confortavelmente com a sua página. Muitos utilizadores dependem do pinch-to-zoom como a sua forma principal de ler conteúdo em dispositivos móveis.
Conformidade com padrões
O W3C HTML Validator sinaliza isto como um aviso porque entra em conflito com padrões de acessibilidade estabelecidos. Embora não vá fazer com que a sua página falhe na validação definitivamente, sinaliza uma prática que prejudica a usabilidade. Os navegadores e sistemas operativos modernos também começaram a sobrepor configurações de viewport restritivas em alguns casos — por exemplo, o iOS Safari ignora user-scalable=no por predefinição — o que significa que a restrição pode nem sequer funcionar como pretendido enquanto ainda desencadeia avisos.
Experiência do utilizador
Mesmo para utilizadores sem deficiências, prevenir o zoom pode ser frustrante. Texto pequeno, layouts densos, ou conteúdo que não se adequa completamente a um tamanho de ecrã podem todos beneficiar do utilizador poder fazer zoom. Restringir esta capacidade remove uma funcionalidade fundamental do navegador que os utilizadores esperam.
Como corrigir
-
Remova
user-scalable=noda sua meta tag viewport. Se estiver presente, ou elimine-o ou defina-o parayes. -
Remova ou aumente
maximum-scale. Se precisar de o definir, use um valor de5ou superior. Idealmente, remova-o completamente e deixe o navegador gerir os limites de zoom. -
Remova
minimum-scalese estiver definido para1, pois isto também pode restringir o comportamento de zoom em alguns navegadores quando combinado com outros valores. - Teste o seu layout a vários níveis de zoom para garantir que o conteúdo se reorganiza adequadamente e permanece utilizável.
Exemplos
❌ Viewport que impede o zoom
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Isto desativa completamente o zoom do utilizador em navegadores compatíveis.
❌ Viewport com maximum-scale restritivo
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">Isto limita o zoom a 100%, efetivamente impedindo qualquer zoom significativo.
❌ Ambas as restrições combinadas
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Esta é a combinação mais restritiva e é comumente vista em frameworks mobile-first e templates.
✅ Viewport acessível (recomendado)
<meta name="viewport" content="width=device-width, initial-scale=1">Isto define um viewport responsivo sem restringir o zoom de forma alguma. O comportamento de zoom predefinido do navegador é preservado, e os utilizadores podem fazer escala livremente.
✅ Viewport acessível com um maximum-scale generoso
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
Se tem uma razão específica para definir maximum-scale, use um valor de 5 ou superior. Isto ainda permite um zoom substancial enquanto lhe dá algum controlo sobre níveis de zoom extremos.
✅ Exemplo completo de documento
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This page allows users to zoom freely.</p>
</body>
</html>
Se o seu layout se quebra quando os utilizadores fazem zoom, a solução é corrigir o CSS — usando unidades relativas como em, rem, ou percentagens, e técnicas de design responsivo — em vez de desativar o zoom. Um layout responsivo bem construído deve lidar com o zoom graciosamente sem precisar de o restringir.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.