A tag meta viewport
Adicione a tag meta viewport e entenda por que ela é necessária para que layouts responsivos funcionem corretamente em dispositivos móveis.
A tag meta viewport é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar a metaetiqueta da área de visualização
Sem a metaetiqueta da área de visualização, os navegadores móveis renderizam a página com uma largura de computador (geralmente 980px) e reduzem a ampliação para ajustá-la. Isso deixa o texto minúsculo e os layouts quebrados. A metaetiqueta informa ao navegador que deve usar a largura real do dispositivo.
A etiqueta
Adicione isto dentro do <head> de cada página. É necessário para que qualquer layout responsivo funcione corretamente.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width define a largura da área de visualização como a largura da tela do dispositivo em pixels CSS. Em um iPhone 14 (com 390px de largura), isso faz com que a área de visualização tenha 390px, e não 980px.
initial-scale=1.0
initial-scale=1.0 define o nível de ampliação como 1 quando a página é carregada pela primeira vez. Sem ele, alguns navegadores ainda podem aplicar um fator de ampliação. Juntamente with a largura do dispositivo, isso proporciona uma proporção real de 1:1 entre pixels CSS e pixels do dispositivo.
Pixels CSS versus pixels físicos
Telas de alta densidade (Retina) têm uma proporção de pixels do dispositivo (DPR) maior que 1. Um iPhone 14 com 390px de largura tem 1170 pixels físicos (DPR = 3). Os pixels CSS abstraem os pixels físicos — seu CSS continua funcionando em pixels CSS, independentemente do DPR.
Não use user-scalable=no
Alguns desenvolvedores adicionam user-scalable=no para desativar a ampliação por pinça. Não faça isso. Essa configuração impede que usuários com deficiências visuais ampliem o conteúdo para ler e não atende ao critério de sucesso 1.4.4 da WCAG.
Unidades da área de visualização: vw e vh
1vw = 1% da largura da área de visualização. 1vh = 1% da altura da área de visualização. 100vw e 100vh preenchem toda a área de visualização. Use-os em seções principais e layouts de tela inteira.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — altura dinâmica da área de visualização
Em dispositivos móveis, 100vh inclui os elementos do navegador (barra de endereço), o que pode fazer o conteúdo ser cortado. O novo 100dvh (altura dinâmica da área de visualização) ajusta-se aos elementos visíveis do navegador. Use-o with um fallback.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}área de visualização no DevTools
No Chrome DevTools, clique no ícone do dispositivo para entrar no modo de dispositivo e ver exatamente a aparência da sua página em diferentes tamanhos de área de visualização. A régua mostra pixels CSS.
variações do atributo de conteúdo
Você também pode definir a escala inicial, a escala mínima e a escala máxima. Mantenha-as em valores razoáveis. Definir escala mínima=1 sem user-scalable=no ainda permite a ampliação, que é a abordagem acessível.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Área de visualização e consultas de mídia
As consultas de mídia usam a largura da área de visualização (o valor em pixels CSS, não os pixels físicos). Se sua área de visualização tiver 390px, @media (max-width: 768px) será aplicada. A metaetiqueta da área de visualização faz com que esses pontos de quebra funcionem corretamente em dispositivos móveis.
Verificação rápida
Qual é a finalidade de width=device-width na metaetiqueta da área de visualização?
Recapitulação: a metaetiqueta da área de visualização
Sempre inclua no
. Nunca desative a ampliação pelo usuário. Use vw/vh para dimensionamento relativo à área de visualização. dvh corrige problemas causados pelos elementos do navegador móvel. Essa única etiqueta permite que todo o CSS responsivo funcione em dispositivos móveis.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “A tag meta viewport” é grátis?
Sim — o texto completo de “A tag meta viewport” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “A tag meta viewport”?
Adicione a tag meta viewport e entenda por que ela é necessária para que layouts responsivos funcionem corretamente em dispositivos móveis. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “A tag meta viewport”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A tag meta viewport
- Flexbox para layouts
- CSS Grid para layouts
- Consultas de mídia e desenvolvimento mobile-first