O que é
Os ecrãs de telemóvel são fisicamente estreitos, mas durante muito tempo a maioria dos sites foi construída a pensar num ecrã de computador muito mais largo. Para manter esses sites antigos utilizáveis, os navegadores móveis assumem por defeito, discretamente, que o ecrã tem cerca de 980 pixels de largura — aproximadamente o tamanho de um computador — e depois encolhem o resultado todo para caber. É por isso que uma página não preparada pode parecer minúscula e afastada num telemóvel, até alguém fazer zoom com os dedos.
A meta tag viewport é uma única linha de código, <meta name="viewport" content="width=device-width, initial-scale=1">, que substitui essa predefinição antiga e diz ao navegador "na verdade, ajusta esta página à largura real do ecrã, com zoom normal". É isto que faz com que um design responsivo (que se adapta a diferentes tamanhos de ecrã) funcione de facto num telemóvel.
Por que importa
Sem esta tag, uma página cuidadosamente concebida para se reorganizar e ajustar a ecrãs móveis nunca chega a ter essa oportunidade — o telemóvel apresenta-a como um layout de computador encolhido, independentemente da qualidade do design subjacente. Esta é uma definição puramente técnica e tudo-ou-nada: ou a tag está presente e correta, ou todos os visitantes num telemóvel veem o layout errado, por muito bem que o resto do site tenha sido desenhado.
Como mais de metade do tráfego web da maioria dos sites vem de telemóveis, esta única linha em falta pode afetar a maioria dos visitantes antes mesmo de começarem a ler.
Como corrigir
- Vê o código-fonte HTML da tua página e verifica dentro da secção
<head>se existe uma tag que comece por<meta name="viewport". - Se estiver em falta, adiciona
<meta name="viewport" content="width=device-width, initial-scale=1">dentro da secção<head>. - Se usas um construtor de sites (Squarespace, Wix, Webflow, WordPress), isto é definido automaticamente pela plataforma — se estiver em falta, é quase sempre um bloco de código personalizado a substituí-lo, por isso verifica qualquer código
<head>personalizado que tenhas adicionado. - Evita adicionar
maximum-scale=1ouuser-scalable=noà mesma tag — isso impede os visitantes de fazer zoom com os dedos, o que cria um problema de acessibilidade à parte. - Depois, abre a página num telemóvel real (ou no modo de pré-visualização móvel do teu navegador) para confirmares que agora preenche o ecrã com um tamanho legível, em vez de aparecer afastada.