Docs executáveis de HTML: Meta viewport

Q: Qual é a meta tag viewport padrão?

, colocada no . É a escolha certa para quase toda página responsiva.

Q: Por que minha meta viewport não está funcionando?

Verifique se a tag está no , se o name é viewport e se os valores estão separados por vírgulas. Se a página ainda rola para os lados, algum elemento é mais largo que a tela, como uma largura fixa, uma imagem grande ou uma palavra longa; a tag não conserta um CSS mais largo que o aparelho.

A tag que você deve usar

Coloque esta linha no <head> de toda página:

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

width=device-width deixa o layout com a largura da tela, e initial-scale=1 abre a página com 100% de zoom. É tudo de que a maioria dos sites precisa. Uma página completa com a tag no lugar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

O script lê a tag e a largura do layout. Os navegadores de desktop ignoram a tag viewport, então nesta prévia a largura é simplesmente a largura da caixa da prévia. Num celular, o mesmo arquivo informa a largura do celular (normalmente de 360 a 430 pixels CSS) por causa da tag.

O que o celular faz sem ela

Um navegador de celular que não encontra a tag viewport supõe que a página foi feita para desktop. Ele monta a página com uns 980 pixels de largura e depois encolhe tudo para caber na tela. Os dois celulares simulados abaixo carregam a mesma página, um montado com 980px e outro com a largura de um celular, os dois reduzidos ao mesmo tamanho:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

No primeiro celular o texto de 16px fica minúsculo e o leitor precisa fazer pinça para dar zoom. No segundo ele continua legível, e as colunas se empilham porque a regra @media (max-width: 600px) é atendida. Essa é a segunda função da tag: as media queries enxergam a largura do layout, então sem a tag um celular informa 980px e os seus estilos para celular nunca se aplicam. Troque 375 por 980 em show('with', 375) e os dois celulares ficam iguais.

A tag é metade do trabalho

A tag viewport dá a você um layout estreito; o seu CSS precisa caber nele. Um único elemento com largura fixa maior que a tela faz a página inteira rolar para os lados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

A primeira caixa rola para os lados; a segunda encolhe para caber. Dê max-width: 100% a imagens e outros elementos largos, e prefira larguras flexíveis (porcentagens, fr, flexbox) a larguras fixas em pixels.

Valores da viewport

Valor	Exemplo	O que faz
`width`	`width=device-width`	Largura do layout. `device-width` é a largura da tela em pixels CSS; um número também é permitido, mas raramente é uma boa ideia.
`initial-scale`	`initial-scale=1`	Nível de zoom quando a página abre.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Limites de zoom. Um máximo baixo bloqueia o zoom, então deixe `maximum-scale` de fora.
`user-scalable`	`user-scalable=yes`	Se o zoom com pinça é permitido. Deixe de fora.
`viewport-fit`	`viewport-fit=cover`	Deixa a página se estender por baixo de um notch ou de cantos arredondados, junto com padding `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Como o teclado na tela afeta o layout. Suportado pelo Chrome no Android.

Os valores são separados por vírgulas. Uma página que ocupa a tela inteira em celulares com notch fica assim:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Não bloqueie o zoom

Você vai encontrar esta tag em templates antigos:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ela impede o zoom com pinça, de que pessoas com baixa visão dependem, e ferramentas de acessibilidade como o Lighthouse a apontam. O Safari no iOS ignora user-scalable=no, então a tag nem funciona de forma consistente. Se um campo de formulário dá zoom quando tocado no iPhone, a causa é uma fonte menor que 16px no input; defina o font-size do input com pelo menos 16px em vez de desativar o zoom.

Erros comuns

Esquecer a tag. Uma folha de estilo responsiva não faz nada no celular sem ela, porque as media queries enxergam um layout de 980px. Coloque-a ao lado da tag title no template da sua página.
Ponto e vírgula entre os valores. Use vírgulas: width=device-width, initial-scale=1.
Fixar uma largura como width=375. As telas variam; use device-width.
Desativar o zoom com user-scalable=no ou maximum-scale=1.
Culpar a tag pela rolagem lateral. Encontre o elemento mais largo que a tela e dê a ele uma largura flexível.

Perguntas frequentes

O que a meta tag viewport faz?

Ela diz aos navegadores de celular qual deve ser a largura do layout. Sem ela, a maioria dos celulares monta a página com uns 980 pixels CSS e a encolhe para caber na tela. Com width=device-width o layout acompanha a largura da tela, então o texto fica legível e as media queries funcionam.

Qual é a meta tag viewport padrão?

<meta name="viewport" content="width=device-width, initial-scale=1">, colocada no <head>. É a escolha certa para quase toda página responsiva.

Por que minha meta viewport não está funcionando?

Verifique se a tag está no <head>, se o name é viewport e se os valores estão separados por vírgulas. Se a página ainda rola para os lados, algum elemento é mais largo que a tela, como uma largura fixa, uma imagem grande ou uma palavra longa; a tag não conserta um CSS mais largo que o aparelho.

Devo usar user-scalable=no ou maximum-scale=1?

Não. Os dois impedem que as pessoas deem zoom, algo de que muitos usuários com baixa visão dependem, e reprovam em auditorias de acessibilidade. O Safari no iOS ignora user-scalable=no de qualquer jeito.

A meta tag viewport afeta os navegadores de desktop?

Não. Os navegadores de desktop a ignoram; lá a largura do layout é simplesmente a largura da janela. A tag faz diferença em celulares e tablets.

Conceitos relacionados