A meta tag viewport é um elemento HTML <meta> colocado no <head> de uma página web que diz aos navegadores móveis como definir a largura e o nível de zoom inicial da página. Sem ela, navegadores móveis renderizam por padrão como se a tela tivesse 980 pixels de largura, e então encolhem tudo para caber. O resultado: texto de apenas 4 pixels de altura, usuários fazendo pinch para zoom, e uma marcação "Página não parece amigável para mobile" em cada auditoria de SEO e acessibilidade. A correção é uma linha de HTML. Quase todo tema WordPress moderno a inclui, mas muitos temas mais antigos ou customizados ainda a omitem.
Como é a meta tag viewport, e qual é o valor correto?
A meta tag viewport padrão recomendada em 2026 é:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Isso diz ao navegador duas coisas. Primeiro, defina a largura do viewport de layout igual à largura da tela do dispositivo (em vez do padrão legado de 980px). Segundo, renderize a página com zoom 1:1 no carregamento inicial (em vez de uma prévia reduzida). Essas duas configurações juntas são o que faz um layout CSS responsivo realmente se comportar de forma responsiva em celulares.
A tag pertence o mais alto possível no <head>, idealmente diretamente após a declaração <meta charset>. Navegadores a parseiam cedo e a usam antes de fazer layout de qualquer outra coisa.
Por que a meta tag viewport é necessária?
A razão disso existir é histórica. Quando o iPhone foi lançado em 2007, a web mobile realmente não existia. A maioria dos sites era projetada para monitores desktop de 1024 pixels. A decisão de engenharia da Apple: renderizar cada página como se o dispositivo tivesse 980 pixels de largura, e então encolher para caber na tela de 320 pixels. Usuários podiam fazer pinch e zoom. Esse era o pior padrão possível para sites genuinamente conscientes de mobile, então a Apple introduziu uma meta tag à qual sites mobile-friendly podiam optar: width=device-width. A convenção se espalhou para todos os outros navegadores móveis, e 17 anos depois ainda é o mecanismo.
A implicação prática para um site WordPress: se seu tema é responsivo (o que essencialmente todo tema de 2014 em diante é), mas a meta tag viewport está faltando, os navegadores não sabem que seu CSS é responsivo. Eles aplicam o fallback legado de 980 pixels, suas media queries nunca disparam, e o site parece quebrado no mobile mesmo que o CSS teria funcionado.
Quais são os parâmetros da meta tag viewport?
O atributo content é uma lista de parâmetros separados por vírgula. Os dois essenciais cobrem 99% dos casos; os outros são situacionais.
width=device-width. Define o viewport de layout para combinar com a largura da tela do dispositivo. Sempre inclua. A alternativa é um valor fixo em pixels (width=1024), que essencialmente nunca é a escolha certa para um site moderno.initial-scale=1.0. Define o nível de zoom quando a página carrega pela primeira vez.1.0significa sem zoom (1 pixel CSS = 1 pixel de layout). Sempre inclua. Sem isso, alguns navegadores Android historicamente aplicaram níveis de zoom inesperados.minimum-scaleemaximum-scale. Definem os limites para o pinch-to-zoom do usuário. Melhor deixar de fora. Restringir o zoom do usuário é uma violação de acessibilidade sob WCAG 2.1 (critério de sucesso 1.4.4 "Redimensionar Texto") e Google considera um problema de usabilidade mobile. Usuários com baixa visão dependem do zoom para ler texto.user-scalable=no. Desabilita o pinch-to-zoom inteiramente. Mesmo problema de acessibilidade que acima. Alguns single-page apps e sites de jogos usam, mas para qualquer site dirigido por conteúdo (blog, loja, página de marketing), prejudica ativamente os usuários. Navegadores modernos ignoramuser-scalable=nono Safari e Firefox especificamente para proteger a acessibilidade.viewport-fit=cover. Diz ao iOS para estender o layout sob o notch e o indicador home no iPhone X e posteriores. Necessário se você tem um design full-bleed que deve alcançar as bordas da tela. Se seu site tem padding padrão ao redor do conteúdo, pode ignorar.interactive-widget. Propriedade mais nova (2023+) que controla como o teclado virtual interage com o viewport. O comportamento padrão é bom para a maioria dos sites.
O que dá errado quando a meta tag viewport está faltando?
Quatro sintomas, todos visíveis imediatamente em um celular:
- O texto é microscópico. A página inteira está espremida na largura da tela, então texto corpo de 16px renderiza com talvez 4-5px de pixels reais. Usuários precisam fazer pinch-zoom para ler.
- Rolagem horizontal aparece. A página é organizada em 980px de largura numa tela de 390px, então há transbordamento horizontal significativo. Usuários precisam rolar lateralmente além de para baixo.
- Botões e links são pequenos demais para tocar. Apple recomenda um alvo de toque mínimo de 44x44 pontos. Reduzidos por um fator de 2,5, eles se tornam 17x17 pixels reais, muito abaixo do que dedos podem atingir confiavelmente.
- Google Search Console sinaliza a página. O relatório de Usabilidade Mobile mostra erros "Viewport não configurado" ou "Conteúdo mais largo que a tela". Desde a indexação mobile-first (totalmente lançada em 2021), Google primariamente indexa a versão mobile do seu site, e páginas com problemas de usabilidade mobile podem rankear mais baixo.
Como verifico se meu site WordPress tem uma meta tag viewport?
Quatro maneiras, mais rápida primeiro:
- Relatório InspectWP. A seção HTML sinaliza se uma meta tag viewport está presente, qual valor ela tem, e se ela restringe o zoom do usuário.
- Visualizar código-fonte da página. Clique direito na página, "Visualizar código-fonte" (ou Cmd/Ctrl+U), procure por "viewport". Você deve encontrar uma tag
<meta name="viewport">. Zero significa que está faltando. Duas ou mais significa que há um conflito em algum lugar do seu tema. - Emulação mobile do Chrome DevTools. Abra DevTools (F12), clique no ícone da barra de ferramentas de dispositivo. Se a página renderiza com zoom out e minúscula no preset iPhone 14, a meta tag viewport está faltando ou errada.
- Google Search Console. Sob "Experiência da página, Usabilidade mobile", quaisquer páginas sem tag viewport são listadas explicitamente.
Como adiciono a meta tag viewport no WordPress?
Três cenários, dependendo de como seu tema é construído:
O tema já a inclui (a maioria dos temas modernos)
Todo tema WordPress padrão desde Twenty Fourteen (2013) inclui a meta tag viewport correta em seu header.php. Temas em bloco (Twenty Twenty-Two em diante) a incluem automaticamente através do editor. Quase todo tema comercial de Astra, GeneratePress, Kadence, Avada, Divi, Elementor Hello, etc. a inclui. Verifique view-source primeiro: se já está lá, não faça nada.
O tema não a inclui (temas mais antigos ou customizados)
Adicione-a ao header.php do seu tema, logo após a linha <meta charset>:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Se você não quer editar arquivos do tema (porque o tema não é seu, ou para sobreviver a atualizações do tema), use um tema filho ou adicione via snippet no functions.php:
add_action('wp_head', function () {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />' . "\n";
}, 1);A prioridade 1 garante que seja emitida muito cedo no <head>. O comportamento do navegador é mais previsível quando viewport é uma das primeiras tags.
Você vê duas tags viewport (conflito)
Alguns plugins (plugins PWA estilo app mobile, plugins AMP, certos page builders) injetam sua própria tag viewport. Se seu tema também emite uma, você acaba com duas, e navegadores usam a primeira que encontram. Sintomas: a página às vezes renderiza corretamente e às vezes não, dependendo de qual carregou primeiro. Correção: identifique a duplicata (procure "viewport" no HTML renderizado), depois desabilite a saída errada. As configurações do plugin geralmente têm um toggle para suprimir sua injeção de viewport.
Devo restringir o zoom do usuário para uma UI estilo app?
Resposta curta: não. A tentação vem de designers querendo que o site se sinta como um app nativo, onde pinch-to-zoom não funciona. A realidade:
- Viola WCAG 2.1. O Critério de Sucesso 1.4.4 das Web Content Accessibility Guidelines exige que usuários possam redimensionar texto até 200% sem perda de funcionalidade. Restringir zoom quebra isso.
- Prejudica usuários com baixa visão. Aproximadamente 4% dos adultos têm alguma forma de deficiência visual que requer zoom. Para eles, sua página "estilo app" é ilegível.
- Navegadores modernos ignoram a restrição de qualquer forma. Safari no iOS 10+ e Firefox têm ativamente ignorado
user-scalable=nopor anos especificamente por causa do dano à acessibilidade. A configuração só funciona em uma minoria decrescente de navegadores. - Prejudica SEO. Os critérios mobile-friendly do Google incluem explicitamente "a página não restringe o pinch-to-zoom". Páginas que o fazem são sinalizadas no Search Console.
Se sua UI quebra quando usuários fazem zoom, a correção certa é fazer o CSS lidar com texto maior graciosamente, não bloquear zoom.
Como a tag viewport interage com design responsivo?
A tag viewport e as media queries CSS trabalham juntas. A tag viewport define o viewport de layout (a largura na qual cálculos CSS acontecem); media queries disparam baseadas nessa largura. Sem width=device-width, suas media queries são avaliadas contra a suposição legada de 980px, então uma regra @media (max-width: 768px) nunca dispara num iPhone de 390px (porque o navegador pensa que o viewport de layout tem 980px de largura).
Essa é a causa mais comum de "meu design responsivo não funciona" num site WordPress: o CSS está bom, as media queries estão corretas, mas a tag viewport está faltando ou errada, então o navegador nunca entra em modo mobile. Adicionar uma linha de HTML corrige.
Erros comuns
- Usar uma largura fixa como
width=1024. Força cada dispositivo a renderizar a 1024px, derrotando o ponto inteiro. Quase sempre um erro de copiar-colar de um tutorial desatualizado. - Definir
initial-scalepara algo diferente de 1.0. Valores como0.5ou2.0significam que a página carrega pré-zoomada in ou out. Usuários imediatamente tentam fazer zoom de volta ao normal. Sempre 1.0. - Restringir zoom com
user-scalable=nooumaximum-scale=1. Violação de acessibilidade, penalidade SEO, ignorado pelo Safari e Firefox modernos de qualquer forma. Simplesmente remova. - Esquecer
viewport-fit=coverem designs full-bleed iPhone X+. O conteúdo não alcança as bordas da tela; você obtém faixas brancas no topo e fundo ao redor do notch e do indicador home. Adicione o parâmetro se o design pretende edge-to-edge. - Adicionar a tag com PHP
echofora do<head>. Uma tag no<body>é HTML inválido e navegadores a ignoram. A tag deve estar dentro do<head>.
O que o InspectWP verifica
A seção HTML de cada relatório InspectWP verifica que uma meta tag viewport está presente e reporta seu valor de conteúdo. Se a tag estiver faltando, o relatório a sinaliza como aviso, já que é um pré-requisito quase universal de usabilidade mobile. Se user-scalable=no ou maximum-scale está configurado para restringir zoom, isso é sinalizado como um problema de acessibilidade. A verificação é independente de se o designer do tema pretendia um layout responsivo; o que importa é se a tag está realmente presente no HTML que o navegador vê. Um site pode ter um framework CSS responsivo perfeito e ainda falhar nessa verificação se a tag viewport foi perdida durante uma migração de tema ou conflito de plugin.