Articles
Introducción a CSS
Diseño adaptable y ventana gráfica (viewport)

Diseño adaptable y ventana gráfica (viewport)

Este artículo explica la ventana gráfica (viewport) y el diseño adaptable.

Aprenderás cómo configurar la ventana gráfica (viewport) utilizando la etiqueta <meta> y por qué es importante.

YouTube Video

HTML para vista previa

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

Acerca de la Configuración del viewport en HTML

La configuración de viewport se utiliza para controlar la información sobre el área de visualización (viewport) del dispositivo que muestra la página web. Desempeña un papel importante, especialmente en la adaptación de la visualización de páginas web en dispositivos móviles.

¿Qué es un Viewport?

El viewport se refiere al área de visualización de una ventana del navegador o dispositivo donde el usuario está viendo una página web. En un ordenador de escritorio, el tamaño de la ventana del navegador se convierte en el viewport, mientras que en dispositivos móviles como smartphones y tabletas, el tamaño de la pantalla del dispositivo se convierte en el viewport.

Especificando el Viewport

Para controlar el viewport, debes configurar los ajustes del viewport utilizando la etiqueta <meta> en HTML. Esta configuración te permite especificar cómo se mostrará la página en diferentes dispositivos.

Sintaxis Básica 

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Este código establece el ancho del viewport para que coincida con el ancho del dispositivo y la escala inicial de visualización (nivel de zoom) de la página en 1.0 (100% de visualización).

Propiedades Principales del viewport

Las propiedades que principalmente se pueden especificar con el atributo content de viewport son las siguientes:.

  1. width

    • Especifica el ancho del viewport con width. Al configurarlo en device-width, el viewport se ajusta al ancho físico del dispositivo en píxeles.
    • Ejemplo: width=device-width

  2. height

    • Especifica la altura del viewport con height, aunque generalmente solo se configura el ancho y la altura no se especifica con frecuencia. Al configurarlo en device-height, el viewport se ajusta a la altura física del dispositivo en píxeles.
    • Ejemplo: height=device-height

  3. initial-scale

    • Especifica el nivel de zoom inicial de la página con initial-scale. 1.0 significa el nivel de zoom al 100% del dispositivo.
    • Ejemplo: initial-scale=1.0

  4. minimum-scale

    • Especifica la escala mínima para alejar el zoom con minimum-scale. Al configurarlo en 0.5, puedes alejar el zoom hasta un 50%.
    • Ejemplo: minimum-scale=0.5

  5. maximum-scale

    • Especifica la escala máxima para acercar el zoom con maximum-scale. Al configurarlo en 2.0, puedes acercar el zoom hasta un 200%.
    • Ejemplo: maximum-scale=2.0

  6. user-scalable

    • Especifica si el usuario puede hacer zoom en la página con user-scalable. Especifica con yes o no.
    • Ejemplo: Configurar user-scalable=no desactiva el zoom por parte del usuario.

Ejemplos Comúnmente Utilizados

  1. Configuraciones responsivas estándar
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta configuración ajusta automáticamente la página para que coincida con el ancho de la pantalla de los dispositivos móviles y asegura que la página se muestre al 100% de zoom. Es una configuración fundamental para el diseño responsivo.

  1. Desactivar zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Esta configuración desactiva el zoom por parte del usuario. Se utiliza cuando el zoom no es necesario para un diseño específico o cuando las operaciones de zoom pueden romper el diseño.

  1. Niveles de zoom fijos y ancho de viewport
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Esta configuración fija el ancho del viewport en 1024 píxeles y establece el nivel de zoom en 100% en la visualización inicial. Se utiliza cuando deseas mantener constante el ancho de la página independientemente del ancho del dispositivo.

Rol del viewport

Establecer el viewport es esencial para optimizar la visualización, especialmente en dispositivos móviles. Configurando correctamente el viewport, puedes evitar problemas como los siguientes:.

  • Evita que la página exceda el ancho del dispositivo, lo cual requeriría desplazamiento horizontal.
  • Evita que el texto e imágenes se vuelvan demasiado pequeños para leer cómodamente.
  • Evita que toda la página se aleje, dificultando la interacción.

Resumen

  • El viewport se utiliza para controlar el área de visualización del dispositivo que muestra la página web.
  • Se usa principalmente para adaptar la visualización en dispositivos móviles y desempeña un papel importante en el diseño responsivo.
  • Configuraciones como width=device-width y initial-scale=1.0 son comúnmente utilizadas en el diseño web responsivo estándar.

Configurar adecuadamente el viewport puede proporcionar a los usuarios móviles una experiencia de visualización cómoda.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Descripción General del Diseño Responsivo en CSS