Etiqueta Meta Viewport

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 62 de 76.

En HTML, la etiqueta meta viewport es una etiqueta especial utilizada para controlar el diseño y el escalado de una página web en diferentes dispositivos, particularmente en dispositivos móviles. Se coloca dentro de la sección <head> de un documento HTML y proporciona instrucciones al navegador sobre cómo renderizar la página. La etiqueta meta viewport es esencial para crear diseños web responsivos que se adapten a varios tamaños de pantalla y resoluciones.

Aquí tienes la sintaxis básica para usar la etiqueta meta viewport:

<meta name="viewport" content="name=value, name=value">

<meta>: La etiqueta HTML utilizada para definir metadatos sobre el documento HTML.
name="viewport": Especifica que esta etiqueta meta se utiliza para controlar la configuración de la ventana gráfica (viewport).
content: Un atributo que proporciona la configuración de la ventana gráfica como una lista de pares name=value separados por comas.

Los pares comunes name=value utilizados en el atributo content incluyen:

width=device-width: Establece el ancho de la ventana gráfica (viewport) al ancho de la pantalla del dispositivo.

initial-scale=1.0: Establece el nivel de zoom inicial cuando la página se carga por primera vez. Un valor de 1.0 significa que no hay zoom.

maximum-scale=1.0: Establece el nivel de zoom máximo permitido.
minimum-scale=1.0: Establece el nivel de zoom mínimo permitido.

Aquí tienes un ejemplo de cómo usar la etiqueta meta viewport en un documento HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

En este ejemplo, la etiqueta meta viewport está configurada como width=device-width, initial-scale=1.0. Esto le indica al navegador que establezca el ancho del viewport al ancho del dispositivo y que use un nivel de zoom inicial de 1.0 (sin zoom).

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>) y un párrafo (<p>). Tu tarea es añadir una etiqueta meta viewport al documento para hacerlo responsivo. Sigue los pasos a continuación:

Añade una etiqueta <meta> a la sección <head> del documento HTML.
Establece el atributo name de la etiqueta <meta> a viewport.
Establece el atributo content de la etiqueta <meta> a width=device-width, initial-scale=1.0.

Pruébalo tú mismo

<html>
<head>
    <title>Viewport Meta Tag</title>
    <!--Escribe tu código aquí-->
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>