La meta etiqueta viewport es una instrucción para controlar la escala en móviles desde la cabecera de nuestro HTML.
Hoy en día abrimos páginas web desde el ordenador, el móvil, la tablet o incluso la televisión. Estamos acostumbrados (más o menos) a que una web se vea bien en cualquier dispositivo.
La técnica que permite que una misma página web se adapte de forma automática, se reordene y se vea perfecta en cualquier tamaño de pantalla es lo que llamamos diseño responsive (o diseño adaptativo).
Para lograrlo, el CSS es nuestro mejor aliado, pero existe un primer paso obligatorio. La meta etiqueta viewport.
El problema del falso monitor de escritorio
Cuando salieron los primeros smartphones modernos (allá por la época del primer iPhone), prácticamente ninguna página web del mundo estaba preparada para pantallas tan pequeñas.
Si el móvil hubiera intentado mostrar las webs a su tamaño real de 320 píxeles, solo se habría visto un trocito microscópico de la esquina superior izquierda de la página, y el resto habría quedado oculto a la derecha obligando a hacer un scroll horizontal espantoso.
Así que dijeron:
Vamos a hacer que el navegador del móvil “mienta”. Le diremos que, internamente, finja tener una pantalla enorme de 980 píxeles de ancho (como un monitor de la época).
Que renderice la web ahí, y luego la encoja y aleje la cámara hasta que quepa entera en la pantallita física del teléfono.
Y tan ricamente, oiga, les pareció la idea del año. Esa decisión salvó la papeleta en 2007, pero creó una experiencia de usuario que era un pequeño infierno.
Teníais que estar constantemente haciendo el gesto de “pellizcar” con los dedos (pinch-to-zoom) y arrastrando la pantalla para poder leer un simple párrafo de texto.
¿Cuánto mide realmente un móvil? (Píxeles físicos vs. lógicos)
¿Se puede hacer peor? Siempre. para hacerlo todo más “gracioso”, si miras las especificaciones de un móvil moderno, verás que tiene resoluciones de 1080x2400 píxeles.
Pero si haces una web con un rectángulo de 500px, se te saldrá de la pantalla. (Whaaaat?). Porque los móviles usan “pixeles lógico”,
- Píxeles físicos: Los pixeles “de verdad”, los pequeños puntos de luz LED reales que hay en el cristal de tu pantalla.
- Píxeles lógicos (o píxeles CSS): Las unidades de medida que usa el navegador móvil..
Básicamente, como las pantallas modernas tienen tanta densidad de pixeles, y para evitar que una letra de 16px se vuelva microscrópica, los sistemas operativos móviles agrupan varios píxeles físicos para actuar como un único píxel lógico.
Por eso, a efectos de diseño web, la anchura real de un móvil en píxeles lógicos suele oscilar entre los 360px y los 430px.
La solución: El viewport
Hoy en día, las páginas modernas sí están preparadas para reordenar sus elementos cuando falta espacio. Pero por cuestiones de compatibilidad histórica, los móviles siguen “mintiendo” y encogiendo la web por defecto.
Para desactivar este comportamiento obsoleto, tenemos que ir a la sección <head> de nuestro HTML y añadir esta línea:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Vamos a destripar qué le estamos diciendo exactamente al móvil con esta instrucción:
width=device-width: “Oye navegador, deja de inventarte que mides 980 píxeles. A partir de ahora, el ancho de tu lienzo de dibujo va a ser exactamente el ancho físico real de la pantalla del dispositivo”.initial-scale=1.0: “Y por favor, no me hagas zoom ni alejes la cámara. Pon el nivel de ampliación base al 100%, que mis textos ya tienen el tamaño correcto”.
Dónde se coloca
La etiqueta viewport siempre debe ir dentro del <head>, junto con el resto de metadatos del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi web responsive</title>
</head>
<body>
<h1>Hola móvil</h1>
</body>
</html>
No se ve en pantalla, no crea ningún elemento visual y no se coloca en el <body>. Es una instrucción técnica para el navegador, igual que charset.
Si usáis el atajo ! de VS Code para generar el HTML base, normalmente ya os incluirá esta línea.
El efecto de viewport
Solo con pegar esa etiqueta en vuestro documento, el cambio es drástico. Las cosas se ven son su tamaño real. El texto vuelve a ser legible en el móvil, y todo ya no se ve diminuto.
Pero ahora tenéis un problema nuevo. Al decirle al móvil que no encoja la página, si tenéis un contenedor <div> al que le habíais puesto un ancho fijo de 800px.
Se saldrá por el borde derecho de la pantalla de un móvil, que suele rondar los 400px (recordar lo que hemos hablado de pixel lógicos) y volveréis a tener el odiado scroll horizontal.
Por eso, la etiqueta viewport es solo el primer paso del diseño responsive. Nos prepara el terreno para que las dimensiones sean reales, pero ahora nos toca el trabajo de verdad de hacer que CS adapta el diseño cuando la pantalla es estrecha.
