La etiqueta <meta> con el atributo viewport en HTML se utiliza para controlar la forma en que el contenido se muestra en dispositivos móviles. Es especialmente importante para hacer que un sitio web sea receptivo y se adapte correctamente a diferentes tamaños de pantalla. Aquí te dejo algunos ejemplos de cómo puedes utilizar la etiqueta <meta> con el atributo viewport:
html<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Viewport</title>
</head>
<body>
<!-- Contenido de tu página -->
</body>
</html>
En este ejemplo, la etiqueta viewport se configura para que el ancho del contenido sea igual al ancho del dispositivo y que la escala inicial sea 1.0.
html<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">
Aquí, se establece una escala mínima del 0.5 y una escala máxima de 2.0, lo que permite al usuario hacer zoom entre el 50% y el 200% del tamaño original.
html<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Esta configuración desactiva la capacidad de hacer zoom en la página.
html<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Esta configuración ajusta el contenido al ancho del dispositivo pero no permite el zoom inicial.
html<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Se utiliza viewport-fit=cover para asegurar que la aplicación web se ajuste completamente a la pantalla del dispositivo.
html<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, orientation=landscape">
Esta configuración permite solo la orientación horizontal (paisaje).
Estos son solo algunos ejemplos de cómo puedes utilizar la etiqueta <meta> con el atributo viewport en HTML para controlar la apariencia y comportamiento de tu sitio web en dispositivos móviles. Puedes personalizar estos valores según las necesidades específicas de tu proyecto.