¿Para qué sirve el atributo viewport en la etiqueta «meta»?
El atributo viewport en la etiqueta de HTML controla cómo tu web se muestra en dispositivos. Usa width=device-width, initial-scale=1.0 para un diseño adaptable.
El «atributo viewport» configura mediante una etiqueta <meta> específica dentro de la sección <head> de tu documento HTML.
Esta etiqueta controla cómo se muestra tu página web en diferentes tamaños de pantalla, especialmente en dispositivos móviles, y es una piedra angular del diseño web adaptable («responsive web design»).
¿Qué es el «Viewport»?
El «viewport» o «ventana gráfica» es el área rectangular visible de una página web en la pantalla del usuario. Sus dimensiones varían enormemente dependiendo del dispositivo: un monitor de escritorio grande tendrá un «viewport» mucho más ancho que la pantalla de un teléfono móvil.
Inicialmente, los navegadores de los primeros smartphones intentaban solucionar el problema de mostrar webs diseñadas para escritorio mostrando la página completa en un «viewport» virtual muy ancho (por ejemplo, 960 o 980 píxeles) y luego encogiendo el resultado para que cupiera en la pequeña pantalla física. Esto hacía que el texto fuera diminuto y la experiencia de usuario muy pobre, obligando a hacer zoom constantemente.
La Etiqueta <meta name="viewport">
Para dar a los desarrolladores control sobre este comportamiento, se introdujo la etiqueta <meta name="viewport">. La configuración más común y esencial es:
HTML
<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Adaptable</title>
</head>
<body>
</body>
</html>
Lenguaje del código: PHP (php)Función principal:
Esta etiqueta instruye al navegador sobre cómo debe establecer las dimensiones y la escala del «viewport» de la página.
Desglose del Atributo content
El atributo content de esta etiqueta <meta> es donde defines las reglas para el «viewport». Las directivas más importantes son:
width=device-width: Esta directiva es fundamental. 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). Esto asegura que la página utilice el ancho real disponible en el dispositivo como base para su diseño.initial-scale=1.0: Esta directiva establece el nivel de zoom inicial cuando la página se carga por primera vez. Un valor de1.0significa que no habrá zoom, es decir, 1 píxel CSS se corresponderá a 1 píxel independiente del dispositivo. Esto permite que tu diseño adaptable se muestre correctamente desde el inicio.
Otras directivas comunes (y opcionales) que puedes añadir, separadas por comas:
maximum-scale=1.0: Limita el zoom máximo que el usuario puede aplicar a la página.minimum-scale=1.0: Limita el zoom mínimo.user-scalable=no(oyes, que es el valor por defecto si no se especifica): Determina si el usuario puede hacer zoom en la página o no. Generalmente, se recomienda permitir el zoom (user-scalable=yeso simplemente no incluiruser-scalable=no) por razones de accesibilidad, ya que algunos usuarios pueden necesitar ampliar el contenido para verlo mejor. Restringir el zoom puede frustrar a los usuarios.
Importancia para el Diseño Adaptable
Incluir y configurar correctamente la etiqueta <meta name="viewport"> es esencial para el diseño web adaptable. Permite que tus hojas de estilo CSS, especialmente las «media queries» que aplican diferentes estilos según el ancho de la pantalla, funcionen como se espera. Sin ella, tu sitio podría no verse bien en dispositivos móviles, apareciendo demasiado pequeño o no ajustándose correctamente al espacio disponible, lo que resultaría en una mala experiencia de usuario. Es una de las primeras etiquetas que deberías añadir a cualquier proyecto web moderno.
