Configurar la meta etiqueta viewport

Què comprova aquesta auditoria

Busca una etiqueta <meta name="viewport"> al <head> de la pàgina i verifica que configuri com a mínim width=device-width i un initial-scale. La comprovació falla quan l’etiqueta no hi és o quan bloqueja el zoom (user-scalable=no, maximum-scale=1.0, totes dues són violacions d’accessibilitat).

Per què importa

Sense una etiqueta viewport, els navegadors mòbils assumeixen que la pàgina és d’escriptori i la renderitzen a 980 px d’amplada, després fan zoom enrere per ajustar-la a la pantalla. El resultat és il·legible: text de 4 píxels, imatges sobredimensionades, sense breakpoints responsius activant-se perquè la matemàtica del viewport és incorrecta.

Indexació mobile-first de Google. Des del 2021, Google fa servir principalment la renderització mòbil de la teva pàgina per al posicionament. Un lloc que falla la comprovació de viewport es tracta com a no mobile-friendly, és una penalització en la cerca mòbil.
Core Web Vitals. LCP, CLS i INP es mesuren tots en mòbil per defecte. Una pàgina sense etiqueta viewport activa la renderització en amplada d’escriptori en un canvas de mida de telèfon, cosa que infla el CLS i el LCP.
Experiència d’usuari. El tràfic mòbil és més del 60% per a la majoria de llocs. L’etiqueta viewport és el que fa que el disseny responsiu funcioni.

Com solucionar-ho

Posa això al <head>, abans de qualsevol CSS que depengui de l’amplada del viewport:

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

Aquesta és la recepta canònica, cada framework, CMS i starter template modern la porta. Si el teu lloc no la té, la plantilla del <head> està malament.

Valors per defecte habituals per framework.

Astro, <ViewTransitions /> no porta res implícit. Afegeix la meta etiqueta al <head> del teu layout base.
Next.js, l’App Router exporta una constant viewport des de app/layout.tsx:

import type { Viewport } from "next";

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

WordPress, cada tema modern emet l’etiqueta a header.php. Si el teu no ho fa, el tema és anterior al 2014.
Vue / Nuxt / Svelte, ve inclòs a l’index.html inicial.

No trenquis l’accessibilitat. Dos antipatrons bloquegen el pinch-to-zoom i violen WCAG 1.4.4:

<!-- Malament, violació d'accessibilitat -->
<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">

Tots dos impedeixen que usuaris amb visió reduïda facin pinch-zoom al text. iOS 13+ ignora user-scalable=no igualment. No afegeixis cap dels dos.

WebViews d’apps natives. Si estàs incrustant la pàgina en un WKWebView d’iOS o un WebView d’Android amb els seus propis controls de zoom, pots limitar el viewport a l’HTML específic del webview, però la versió pública del web encara necessita l’etiqueta estàndard.

Audita el teu cas:

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

Espera width=device-width, initial-scale=1. Si grep no retorna res, l’etiqueta no hi és.

Preguntes freqüents

Quina diferència hi ha entre `initial-scale=1` i `width=device-width`?

width=device-width posa l’amplada del viewport perquè coincideixi amb l’amplada de píxels CSS del dispositiu (375 a l’iPhone, 360 a la majoria d’Android). initial-scale=1 posa el nivell de zoom inicial a 1.0. Tots dos són necessaris, configura’ls junts.

Hauria d’incloure `viewport-fit=cover` per als notch dels iPhone?

Només si fas servir env(safe-area-inset-*) al CSS per empènyer contingut fora del notch / dynamic island. Si no, el valor per defecte està bé.

L’etiqueta afecta els navegadors d’escriptori?

Els navegadors d’escriptori ignoren del tot l’etiqueta viewport, sempre renderitzen a l’amplada real de la finestra. L’etiqueta és només per a mòbil.