¿Qué es la etiqueta «meta name="viewport" ...» y por qué es importante para el diseño adaptable?
es vital para el diseño adaptable.
La etiqueta <meta name="viewport" ...> es una instrucción crucial que colocas en la sección <head> de tu documento HTML, y es fundamental para el diseño web adaptable («responsive web design»). Su propósito es decirle al navegador cómo debe controlar las dimensiones de la página y su nivel de escala en la pantalla del dispositivo, especialmente en móviles.
El «viewport» es, en esencia, el área visible de la página web para el usuario en la pantalla de su dispositivo. En los inicios de la web móvil, los navegadores de los teléfonos intentaban mostrar las páginas web completas como si fueran pantallas de ordenador, lo que resultaba en que todo se veía muy pequeño y era necesario hacer mucho zoom para leer.
La configuración más común y recomendada de esta etiqueta es:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Adaptable</title>
</head>
Lenguaje del código: PHP (php)Analicemos el atributo content:
width=device-width: Esta parte le dice al navegador que establezca el ancho del viewport de la página igual al ancho de la pantalla del dispositivo en píxeles independientes del dispositivo (DIPs). Así, la página utiliza el espacio disponible de forma óptima.initial-scale=1.0: Esto controla el nivel de zoom inicial cuando la página se carga por primera vez. Un valor de1.0significa que no habrá zoom, mostrando la página en una relación 1:1 entre los píxeles CSS y los píxeles independientes del dispositivo.
¿Por qué es tan importante?
Sin esta etiqueta, los navegadores móviles suelen simular un viewport de escritorio mucho más ancho (por ejemplo, 980px) y luego encogen la página resultante, lo que impide que tus diseños adaptables (hechos con «media queries» en CSS) funcionen como esperas.
Al establecer el viewport correctamente, te aseguras de que tu web se adapte y se vea bien en cualquier tamaño de pantalla, ofreciendo una experiencia de usuario óptima. Es un pilar del desarrollo web moderno.
