A meta tag viewport diz aos navegadores mobile qual largura dar à área de layout da página e com que zoom abri-la. Quase todo site deve usar exatamente esta linha no <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Sem ela, o celular assume que a página é um design de desktop, monta o layout com cerca de 980 px de largura e reduz tudo para caber na tela. Seu CSS responsivo nunca chega a ser aplicado.
O que acontece sem a meta tag viewport
Quando os primeiros smartphones surgiram, a maioria dos sites era feita para telas de desktop. Para conseguir exibi-los, os navegadores mobile fingiam ter uma “viewport de layout” do tamanho de um desktop (980 px no Safari do iOS e no Chrome para Android) e diminuíam o zoom para a página inteira caber na tela. Depois, os usuários davam zoom com os dedos para ler.
Esse comportamento padrão ainda vale para qualquer página sem a tag viewport. Num celular com tela de 390 px de largura, uma página assim:
- informa ao CSS e ao JavaScript uma viewport de cerca de 980 px
- nunca se encaixa em media queries como
(max-width: 600px) - mostra o texto com mais ou menos 40% do tamanho pretendido
Se o seu site parece uma página de desktop minúscula no celular, confira esta tag primeiro. É a causa mais comum entre as explicadas em por que o site fica desconfigurado no celular.
O que cada valor significa
| Valor | Significado | Recomendado |
|---|---|---|
width=device-width |
Define a viewport de layout com a largura do aparelho em pixels CSS (por exemplo, 390 em muitos iPhones) | Sim |
initial-scale=1 |
Começa com 100% de zoom, com 1 pixel CSS para 1 pixel independente de dispositivo | Sim |
minimum-scale |
Menor zoom permitido | Raramente necessário |
maximum-scale |
Maior zoom permitido | Evite valores abaixo de 5 |
user-scalable=no |
Desativa o zoom com os dedos | Evite |
width=1024 (número fixo) |
Força uma largura de layout fixa | Evite em sites responsivos |
viewport-fit=cover |
Estende a página por baixo do notch e dos cantos arredondados | Só com padding de safe area |
interactive-widget |
Controla como o teclado na tela redimensiona a página | Opcional |
Por que você não deve desativar o zoom
user-scalable=no e maximum-scale=1 impedem as pessoas de dar zoom. Isso dificulta ou impossibilita a leitura para quem tem baixa visão e contraria a exigência da WCAG de que o texto possa ser ampliado até 200%. O Lighthouse aponta isso na auditoria de acessibilidade.
Muitos desenvolvedores adicionam esses valores para impedir que o Safari no iOS dê zoom nos campos de formulário. A correção certa é usar fonte de pelo menos 16 px nos campos:
input, select, textarea { font-size: 1rem; }De qualquer forma, o Safari atual do iOS ignora user-scalable=no para o zoom com os dedos, então a tag prejudica principalmente os outros navegadores.
viewport-fit=cover e áreas seguras
Em celulares com notch, Dynamic Island ou cantos arredondados, os navegadores mantêm a página por padrão dentro de um retângulo seguro. viewport-fit=cover deixa a página ocupar a tela inteira, o que você pode querer em designs de ponta a ponta. Aí cabe a você afastar o conteúdo do notch e do indicador de início:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">.site-header {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }Teste na horizontal, quando o notch fica na lateral.
interactive-widget e o teclado na tela
Quando o teclado abre, os navegadores ou diminuem só a viewport visual (o padrão no Chrome e no Safari) ou redimensionam o layout inteiro. O valor mais novo interactive-widget permite escolher:
resizes-visual: padrão; o layout mantém o tamanho e o teclado cobre parte deleresizes-content: a viewport de layout diminui, então elementos com100dvhe rodapés fixos sobem acima do tecladooverlays-content: nada é redimensionado; trate isso você mesmo com a VirtualKeyboard API
O suporte varia entre navegadores (os baseados em Chromium suportam; confira o suporte atual antes de depender disso), então teste os formulários em celulares reais de qualquer jeito.
Valores obsoletos que você pode remover
shrink-to-fit=noera um contorno para o iOS 9 e não tem mais efeito.target-densitydpiera um valor antigo do Android e é ignorado.<meta name="HandheldFriendly">e<meta name="MobileOptimized">são da época dos celulares de teclinha.
Como conferir sua tag viewport
- Veja o código-fonte da página e procure
name="viewport". Deve haver exatamente uma. - Rode uma auditoria do Lighthouse no modo mobile (como fazer); ela aponta tags viewport ausentes ou que bloqueiam o zoom.
- Abra a página numa visualização mobile. No modo dispositivo do DevTools ou no Mobile View Extension, que carrega a página no tamanho de um celular real, uma página sem a tag aparece reduzida, com texto minúsculo.
Perguntas frequentes
Qual é a meta tag viewport correta?
<meta name="viewport" content="width=device-width, initial-scale=1">. Acrescente viewport-fit=cover só se você projeta layouts de tela cheia e cuida das áreas seguras.
Preciso da meta tag viewport para ter um design responsivo?
Sim. Sem ela, os navegadores mobile montam as páginas com cerca de 980 px de largura, e as media queries de mobile nunca são aplicadas.
É ruim usar user-scalable=no?
Sim, para a acessibilidade. Ele impede que as pessoas ampliem o texto. Corrija o zoom indesejado nos campos de formulário com fonte de 16 px nos inputs.