Define a etiqueta meta viewport - Docs do MetricSpot

Q: Qual é a diferença entre `initial-scale=1` e `width=device-width`?

width=device-width define a largura do viewport para corresponder à largura em píxeis CSS do dispositivo (375 no iPhone, 360 na maioria dos Android). initial-scale=1 define o nível inicial de zoom em 1.0. Ambos são necessários — define-os em conjunto.

Q: Devo incluir `viewport-fit=cover` para os notches do iPhone?

Apenas se estás a usar env(safe-area-inset-*) no CSS para empurrar conteúdo para fora do notch / dynamic island. Caso contrário, o valor por defeito serve.

O que esta verificação faz

Procura uma etiqueta <meta name="viewport"> no <head> da página e confirma que define, no mínimo, width=device-width e um initial-scale. A verificação falha quando a etiqueta está ausente ou quando bloqueia o zoom (user-scalable=no, maximum-scale=1.0 — ambos violações de acessibilidade).

Porque é importante

Sem uma etiqueta viewport, os navegadores móveis assumem que a página é desktop e renderizam-na a 980 px de largura, fazendo depois zoom out para caber no ecrã. O resultado é ilegível: texto a 4 píxeis, imagens enormes, sem breakpoints responsivos a disparar porque a matemática do viewport está errada.

Indexação mobile-first do Google. Desde 2021, o Google usa principalmente a renderização móvel da tua página para o ranking. Um site que falha a verificação do viewport é tratado como não compatível com dispositivos móveis — uma penalização de ranking na pesquisa móvel.
Core Web Vitals. LCP, CLS e INP são todos medidos em mobile por defeito. Uma página sem etiqueta viewport dispara a renderização em largura desktop num ecrã de telemóvel, o que inflaciona o CLS e o LCP.
Experiência do utilizador. O tráfego móvel representa mais de 60% para a maioria dos sites. A etiqueta viewport é o que faz o design responsivo funcionar.

Como corrigir

Coloca isto no <head>, antes de qualquer CSS que dependa da largura do viewport:

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

É a receita canónica — todas as framework, CMS e starter template modernos a incluem. Se o teu site não a tem, o template do <head> está errado.

Predefinições comuns por framework.

Astro — <ViewTransitions /> não inclui nada implícito. Adiciona a meta tag ao <head> do teu layout base.
Next.js — o App Router exporta uma constante viewport a partir de app/layout.tsx:

import type { Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

WordPress — todos os temas modernos imprimem a etiqueta em header.php. Se o teu não o faz, o tema é anterior a 2014.
Vue / Nuxt / Svelte — incluída no index.html do starter.

Não quebres a acessibilidade. Dois antipadrões bloqueiam o pinch-to-zoom e violam o WCAG 1.4.4:

<!-- Mau — violação de acessibilidade -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Ambos impedem que utilizadores com baixa visão façam pinch-zoom ao texto. O iOS 13+ ignora user-scalable=no de qualquer forma. Não adiciones nenhum deles.

Webviews de apps nativas. Se estás a incorporar a página numa WKWebView do iOS ou numa WebView do Android com os seus próprios controlos de zoom, podes restringir o viewport ao HTML específico da webview — mas a versão pública da web continua a precisar da etiqueta padrão.

Audita por ti:

curl -s https://teudominio.com/ | grep -o '<meta name="viewport"[^>]*>'

Espera width=device-width, initial-scale=1. Se o grep não retornar nada, a etiqueta está em falta.

Perguntas frequentes

Qual é a diferença entre `initial-scale=1` e `width=device-width`?

width=device-width define a largura do viewport para corresponder à largura em píxeis CSS do dispositivo (375 no iPhone, 360 na maioria dos Android). initial-scale=1 define o nível inicial de zoom em 1.0. Ambos são necessários — define-os em conjunto.

Devo incluir `viewport-fit=cover` para os notches do iPhone?

Apenas se estás a usar env(safe-area-inset-*) no CSS para empurrar conteúdo para fora do notch / dynamic island. Caso contrário, o valor por defeito serve.

A etiqueta afeta navegadores desktop?

Os navegadores desktop ignoram completamente a etiqueta meta viewport — renderizam sempre na largura real da janela. A etiqueta é exclusivamente móvel.