Verificador de meta viewport

Cole uma URL e veja se a meta viewport existe e como ela está configurada.

URL para analisar

A página é buscada pelo servidor do DevTools. Só funciona com URLs públicas.

O que é

A meta viewport instrui o navegador móvel sobre a largura a considerar ao desenhar a página. Sem ela, o navegador assume uma largura virtual de cerca de 980 pixels — herança da web feita só para desktop — e depois encolhe tudo para caber na tela, produzindo aquela página inteira em miniatura que exige pinçar para ler. A declaração usual é content="width=device-width, initial-scale=1".

Por que importa

Desde 2019 o Google indexa pela versão mobile: o rastreador que decide o conteúdo e a posição da sua página é o do celular. Sem a meta viewport, a página é classificada como não responsiva mesmo que o CSS tenha todos os media queries do mundo — a declaração é o que liga o comportamento responsivo. É um caso raro em SEO onde uma única linha ausente muda a avaliação da página inteira.

Como corrigir

Use exatamente content="width=device-width, initial-scale=1". É a configuração correta para a esmagadora maioria dos sites.
Não inclua maximum-scale=1 nem user-scalable=no. Bloquear o zoom impede quem tem baixa visão de ampliar o texto e é falha de acessibilidade pelo critério 1.4.4 da WCAG.
Declare a tag em todas as páginas. Como costuma morar no template do <head>, o esquecimento aparece em páginas fora do layout principal — erro 404 customizado, páginas de impressão, landing pages avulsas.
Não confunda com largura fixa: definir width=1024 na viewport recria o problema que a tag existe para resolver.
Depois de corrigir, teste em telas estreitas de verdade. A meta viewport habilita o comportamento responsivo, mas não conserta um layout que só funciona a partir de determinada largura.

A declaração correta

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

<!-- Errado: impede o zoom e falha em acessibilidade -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Perguntas frequentes

O que acontece se a página não tiver meta viewport?: O navegador móvel desenha a página com largura virtual de aproximadamente 980 pixels e reduz o resultado para caber na tela. O texto fica minúsculo, o usuário precisa dar zoom para ler, e o Google classifica a página como não otimizada para dispositivos móveis.
Posso desativar o zoom com user-scalable=no?: Tecnicamente sim, mas não faça. Bloquear o zoom quebra o critério 1.4.4 da WCAG e prejudica diretamente quem tem baixa visão. Navegadores modernos inclusive ignoram a restrição em muitos contextos, então o único efeito garantido é o problema de acessibilidade.
Meta viewport substitui media queries no CSS?: Não, os dois trabalham juntos. A meta viewport diz ao navegador para usar a largura real do aparelho; os media queries decidem como o layout se comporta nessa largura. Sem a tag, os media queries são avaliados contra a largura virtual de 980px e praticamente não disparam.
initial-scale=1 é obrigatório?: Não é obrigatório, mas é recomendado. Sem ele alguns navegadores aplicam um zoom inicial próprio ao trocar a orientação da tela, e o resultado é a página abrir em escala diferente da esperada.

Outras checagens

Ferramentas relacionadas

Validador de SEO completo — viewport junto com os outros checks de página
Todas as checagens de SEO

O que é

Por que importa

Como corrigir

Use exatamente content="width=device-width, initial-scale=1". É a configuração correta para a esmagadora maioria dos sites.

Não inclua maximum-scale=1 nem user-scalable=no. Bloquear o zoom impede quem tem baixa visão de ampliar o texto e é falha de acessibilidade pelo critério 1.4.4 da WCAG.

Declare a tag em todas as páginas. Como costuma morar no template do <head>, o esquecimento aparece em páginas fora do layout principal — erro 404 customizado, páginas de impressão, landing pages avulsas.

Não confunda com largura fixa: definir width=1024 na viewport recria o problema que a tag existe para resolver.

Depois de corrigir, teste em telas estreitas de verdade. A meta viewport habilita o comportamento responsivo, mas não conserta um layout que só funciona a partir de determinada largura.

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

Perguntas frequentes

O que acontece se a página não tiver meta viewport?

O navegador móvel desenha a página com largura virtual de aproximadamente 980 pixels e reduz o resultado para caber na tela. O texto fica minúsculo, o usuário precisa dar zoom para ler, e o Google classifica a página como não otimizada para dispositivos móveis.

Posso desativar o zoom com user-scalable=no?

Tecnicamente sim, mas não faça. Bloquear o zoom quebra o critério 1.4.4 da WCAG e prejudica diretamente quem tem baixa visão. Navegadores modernos inclusive ignoram a restrição em muitos contextos, então o único efeito garantido é o problema de acessibilidade.

Meta viewport substitui media queries no CSS?

Não, os dois trabalham juntos. A meta viewport diz ao navegador para usar a largura real do aparelho; os media queries decidem como o layout se comporta nessa largura. Sem a tag, os media queries são avaliados contra a largura virtual de 980px e praticamente não disparam.

initial-scale=1 é obrigatório?

Não é obrigatório, mas é recomendado. Sem ele alguns navegadores aplicam um zoom inicial próprio ao trocar a orientação da tela, e o resultado é a página abrir em escala diferente da esperada.