Devo desativar user-scalable para evitar zoom "acidental"?

Geralmente não — bloquear o zoom por pinça impede que visitantes com baixa visão ampliem para ler seu conteúdo, o que é sinalizado pelas diretrizes de acessibilidade (WCAG 1.4.4). Corrija problemas de layout em vez de desativar o zoom.

O que viewport-fit=cover realmente faz?

Em dispositivos com notch ou cantos arredondados, permite que o fundo da sua página se estenda até essas margens de safe-area em vez de deixar uma barra preta, enquanto você usa as funções CSS env(safe-area-inset-*) para manter o conteúdo em si afastado do notch.

width=device-width está sempre correto?

Para a grande maioria dos sites responsivos, sim — isso faz a viewport CSS corresponder à largura natural do dispositivo, para que seus breakpoints responsivos se comportem de forma previsível.

Categoria: Desenvolvimento

Gerador de Viewport Meta

Ideia nossaFalta uma ferramenta?

Gere uma meta tag de viewport responsiva e entenda suas opções

Defina a largura, escala inicial, limites de zoom, permissão de zoom por pinça e viewport-fit para a meta tag de viewport da sua página, com uma breve explicação de cada opção, e copie a tag finalizada para o seu <head>. Feito localmente no seu navegador.

LarguraGeralmente "device-width", para que o layout corresponda à largura em pixels CSS da tela.Escala inicialO nível de zoom no primeiro carregamento; 1 significa sem zoom.Escala mínimaEscala máximaDeixe em branco para permitir que os visitantes ampliem livremente entre quaisquer limites.Ajuste da viewport"cover" permite que o conteúdo se estenda até os recortes de notch/safe-area em dispositivos compatíveis.

Permitir zoom por pinça (user-scalable)

Desativar isso bloqueia o zoom por pinça, o que prejudica a acessibilidade — a maioria dos sites deve deixar isso ativado.

Meta tag

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

Tudo nesta página é processado no seu navegador. Nada é enviado.

Para que serve

A meta tag viewport informa a um navegador móvel como dimensionar e escalar uma página — sem ela, celulares renderizam páginas com uma largura fixa parecida com a de desktop e reduzem o zoom, por isso é uma das primeiras coisas que um verificador de compatibilidade com dispositivos móveis procura. Definir width=device-width e initial-scale=1 cobre o caso comum, mas vale entender os limites de escala e as opções de viewport-fit em vez de simplesmente copiar e colar, já que desativar o zoom por completo é um problema de acessibilidade para usuários com baixa visão.

Como usar

Deixe a largura como "device-width", a menos que tenha um motivo específico para mudar.
Defina uma escala inicial e, opcionalmente, limites mínimo/máximo de zoom.
Decida se deseja permitir o zoom por pinça — recomenda-se deixá-lo ativado.
Escolha um valor de viewport-fit se o seu design precisar alcançar os recortes de notch ou safe-area.
Copie a tag gerada para o <head> da sua página.

Privacidade

Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.

Perguntas frequentes

Devo desativar user-scalable para evitar zoom "acidental"?: Geralmente não — bloquear o zoom por pinça impede que visitantes com baixa visão ampliem para ler seu conteúdo, o que é sinalizado pelas diretrizes de acessibilidade (WCAG 1.4.4). Corrija problemas de layout em vez de desativar o zoom.
O que viewport-fit=cover realmente faz?: Em dispositivos com notch ou cantos arredondados, permite que o fundo da sua página se estenda até essas margens de safe-area em vez de deixar uma barra preta, enquanto você usa as funções CSS env(safe-area-inset-*) para manter o conteúdo em si afastado do notch.
width=device-width está sempre correto?: Para a grande maioria dos sites responsivos, sim — isso faz a viewport CSS corresponder à largura natural do dispositivo, para que seus breakpoints responsivos se comportem de forma previsível.