Configura la etiqueta meta viewport

Q: ¿Qué diferencia hay entre `initial-scale=1` y `width=device-width`?

width=device-width ajusta el ancho del viewport al ancho en píxeles CSS del dispositivo (375 en iPhone, 360 en la mayoría de Android). initial-scale=1 establece el nivel inicial de zoom a 1.0. Ambos son necesarios: ponlos juntos.

Q: ¿Debo incluir `viewport-fit=cover` para los notches del iPhone?

Solo si usas env(safe-area-inset-*) en CSS para sacar el contenido del notch o de la dynamic island. Si no, el valor por defecto está bien.

Qué comprueba esta auditoría

Busca una etiqueta <meta name="viewport"> en el <head> y verifica que establezca al menos width=device-width y un initial-scale. La comprobación falla cuando la etiqueta falta por completo o cuando bloquea el zoom (user-scalable=no, maximum-scale=1.0, ambas violaciones de accesibilidad).

Por qué importa

Sin etiqueta viewport, los navegadores móviles asumen que la página es de escritorio y la renderizan a 980px de ancho, luego reducen el zoom para que quepa en la pantalla. El resultado es ilegible: texto de 4 píxeles, imágenes desproporcionadas y ningún breakpoint responsive activándose porque las matemáticas del viewport están mal.

Mobile-first indexing de Google. Desde 2021, Google usa principalmente el renderizado móvil de tu página para posicionar. Un sitio que falla la comprobación de viewport se trata como no apto para móviles, una penalización de ranking en la búsqueda móvil.
Core Web Vitals. LCP, CLS e INP se miden en móvil por defecto. Una página sin etiqueta viewport dispara el renderizado a ancho de escritorio en un lienzo del tamaño de un teléfono, lo que infla el CLS y el LCP.
Experiencia de usuario. El tráfico móvil supera el 60 % en la mayoría de sitios. La etiqueta viewport es lo que hace que el diseño responsive funcione.

Cómo solucionarlo

Coloca esto en el <head>, antes de cualquier CSS que dependa del ancho del viewport:

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

Esa es la receta canónica: todos los frameworks, CMS y starter templates modernos la incluyen. Si tu sitio no la tiene, la plantilla de <head> está mal.

Valores por defecto en frameworks habituales.

Astro — <ViewTransitions /> no incluye nada implícito. Añade la meta etiqueta al <head> de tu layout base.
Next.js — el App Router exporta una constante viewport desde app/layout.tsx:

import type { Viewport } from "next";

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

WordPress — cualquier tema moderno emite la etiqueta en header.php. Si el tuyo no lo hace, es anterior a 2014.
Vue / Nuxt / Svelte — incluida en el index.html del starter.

No rompas la accesibilidad. Dos antipatrones bloquean el pinch-to-zoom e infringen WCAG 1.4.4:

<!-- Mal — violación de accesibilidad -->
<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 impiden a los usuarios con baja visión hacer zoom con dos dedos. iOS 13+ ignora user-scalable=no de todos modos. No añadas ninguno.

WebViews de aplicaciones nativas. Si embebes la página en un iOS WKWebView o Android WebView con sus propios controles de zoom, puedes acotar el viewport al HTML específico del webview, pero la versión pública en web sigue necesitando la etiqueta estándar.

Audítalo tú:

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

Espera width=device-width, initial-scale=1. Si grep no devuelve nada, la etiqueta falta.

Preguntas frecuentes

¿Qué diferencia hay entre `initial-scale=1` y `width=device-width`?

width=device-width ajusta el ancho del viewport al ancho en píxeles CSS del dispositivo (375 en iPhone, 360 en la mayoría de Android). initial-scale=1 establece el nivel inicial de zoom a 1.0. Ambos son necesarios: ponlos juntos.

¿Debo incluir `viewport-fit=cover` para los notches del iPhone?

Solo si usas env(safe-area-inset-*) en CSS para sacar el contenido del notch o de la dynamic island. Si no, el valor por defecto está bien.

¿La etiqueta afecta a los navegadores de escritorio?

Los navegadores de escritorio ignoran por completo la etiqueta meta viewport: siempre renderizan al ancho real de la ventana. La etiqueta es exclusiva de móvil.