Sobre a etiqueta Meta Viewport
O que é a etiqueta meta viewport?
A etiqueta meta viewport indica a um navegador móvel como dimensionar a página. Sem ela, os telemóveis assumem que a página foi criada para um computador, apresentam-na com cerca de 980 píxeis de largura e reduzem o resultado para caber no ecrã, produzindo uma página legível em miniatura, mas que ninguém consegue utilizar sem fazer zoom.
É uma única linha no cabeçalho e é o interruptor que faz com que o CSS responsivo entre realmente em ação. As media queries medem a viewport; por isso, se a viewport for uma ficção, cada breakpoint que definiu estará a medir a coisa errada.
Vale a pena executar um verificador da etiqueta meta viewport em qualquer página criada fora do seu modelo principal, porque é quase sempre aí que se encontra uma etiqueta em falta.
A etiqueta viewport ainda é relevante em 2026?
Sem dúvida, porque, sem ela, todo o restante trabalho de otimização para dispositivos móveis é desperdiçado. Pode criar uma folha de estilos perfeitamente fluida e publicar uma página que se comporta como se tivesse sido criada em 2009.
Os temas modernos incluem-na de série, e é precisamente por isso que a sua ausência passa tão facilmente despercebida. Quando desaparece, geralmente é num modelo personalizado, numa página de destino de uma campanha ou numa página montada por uma ferramenta que gerou o seu próprio elemento head.
As definições são tão importantes como a presença. Está presente uma etiqueta que desativa o zoom, o que está correto de acordo com este teste, mas constitui uma falha de acessibilidade.
Como a etiqueta viewport se relaciona com a pesquisa por IA
Afeta a apresentação em dispositivos móveis, e é essa apresentação que é indexada. Uma página que não consegue ser apresentada corretamente num telemóvel está a ser avaliada na sua pior forma, em vez da forma pretendida.
A etiqueta não transmite, por si só, nenhum significado que um crawler leia, mas a sua ausência compromete tudo o que dela depende, incluindo a quantidade de conteúdo visível na vista renderizada.
É uma das correções mais baratas desta lista e uma das poucas com um efeito de tudo ou nada.
Boas práticas do viewport
- Inclua-o em todas as páginas, no elemento head.
- Defina a largura para a largura do dispositivo e a escala inicial para 1.
- Não desative o zoom nem limite a escala máxima. Impedir o zoom é uma falha de acessibilidade.
- Verifique as páginas personalizadas e de campanha separadamente do modelo principal.
- Confirme num telemóvel real, em vez de utilizar apenas um emulador de computador.
O que esta ferramenta verifica
A ferramenta lê o HTML da página e indica se está presente uma meta tag viewport.
Verifica a presença, não as definições, pelo que uma etiqueta que desativa o zoom continua a passar. Se a etiqueta estiver presente e a página continuar a comportar-se mal num telemóvel, as definições são o passo seguinte a verificar.
Próximos passos
The viewport tag makes responsive layout possible; the rest is whether the layout is any good. See how the page actually renders on phone and tablet screens with the
responsividade em dispositivos móveis test.