Frontend Academy · Lección

La etiqueta meta viewport

Añada la etiqueta meta viewport y comprenda por qué es necesaria para que los layouts responsive funcionen correctamente en dispositivos móviles.

La etiqueta meta viewport es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué utilizar la etiqueta meta viewport?

Sin la etiqueta meta viewport, los navegadores móviles muestran la página con un ancho de escritorio (a menudo de 980px) y reducen el zoom para ajustarla. Esto hace que el texto sea diminuto y que los diseños se vean descompuestos. La etiqueta meta indica al navegador que utilice el ancho real del dispositivo.

La etiqueta

Añada esto dentro de <head> en todas las páginas. Es necesario para que cualquier diseño adaptable funcione correctamente.

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

width=device-width

width=device-width establece el ancho del viewport en el ancho de la pantalla del dispositivo en píxeles CSS. En un iPhone 14 (con un ancho de 390px), el viewport será de 390px, no de 980px.

initial-scale=1.0

initial-scale=1.0 establece el nivel de zoom en 1 cuando la página se carga por primera vez. Sin este valor, algunos navegadores podrían aplicar todavía un factor de zoom. Junto con device-width, proporciona una relación real de 1:1 entre píxeles CSS y píxeles del dispositivo.

Píxeles CSS frente a píxeles físicos

Las pantallas de alta densidad (Retina) tienen una relación de píxeles del dispositivo (DPR) superior a 1. Un iPhone 14 de 390px de ancho tiene 1170 píxeles físicos (DPR = 3). Los píxeles CSS abstraen los píxeles físicos: el CSS sigue funcionando con píxeles CSS independientemente del DPR.

No utilice user-scalable=no

Algunos desarrolladores añaden user-scalable=no para desactivar el zoom con gesto de pellizco. No lo haga. Impide que las personas con discapacidad visual amplíen el contenido para leerlo y no cumple el criterio de conformidad 1.4.4 de WCAG.

Unidades del viewport: vw y vh

1vw = el 1 % del ancho del viewport. 1vh = el 1 % de la altura del viewport. 100vw y 100vh ocupan todo el viewport. Utilícelas para secciones hero y diseños a pantalla completa.

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — altura dinámica del viewport

En dispositivos móviles, 100vh incluye la interfaz del navegador (la barra de direcciones), lo que puede hacer que se corte parte del contenido. El nuevo valor 100dvh (altura dinámica del viewport) se ajusta a la interfaz visible. Utilícelo con un valor de reserva.

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

viewport en DevTools

En Chrome DevTools, haga clic en el icono del dispositivo para activar el modo de dispositivo y comprobar exactamente cómo se ve la página con distintos tamaños de viewport. La regla muestra píxeles CSS.

Variaciones del atributo content

También puede establecer initial-scale, minimum-scale y maximum-scale. Manténgalos en valores razonables. Establecer minimum-scale=1 sin user-scalable=no sigue permitiendo el zoom, que es el enfoque accesible.

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

Viewport y media queries

Las media queries utilizan el ancho del viewport (el valor en píxeles CSS, no los píxeles físicos). Si el viewport es de 390px, @media (max-width: 768px) coincidirá. La etiqueta meta viewport hace que estos breakpoints funcionen correctamente en dispositivos móviles.

Comprobación rápida

¿Cuál es el propósito de width=device-width en la etiqueta meta viewport?

Repaso: la etiqueta meta viewport

Incluya siempre dentro de . Nunca desactive el escalado del usuario. Utilice vw/vh para tamaños relativos al viewport. dvh corrige los problemas causados por la interfaz del navegador móvil. Esta única etiqueta permite que todo el CSS adaptable funcione en dispositivos móviles.

Preguntas frecuentes

¿La lección «La etiqueta meta viewport» es gratis?

Sí — el texto completo de «La etiqueta meta viewport» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «La etiqueta meta viewport»?

Añada la etiqueta meta viewport y comprenda por qué es necesaria para que los layouts responsive funcionen correctamente en dispositivos móviles. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «La etiqueta meta viewport»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy