Responsive Web Design - The Viewport

¿Qué es el Viewport?

El viewport es el área visible para el usuario de una página web.

El viewport varía según el dispositivo y será más pequeña en un teléfono móvil que en la pantalla de una computadora.

Antes de las tabletas y los teléfonos móviles, las páginas web se diseñaban únicamente para pantallas de ordenador, y era habitual que las páginas web tuvieran un diseño estático y un tamaño fijo.

Luego, cuando empezamos a navegar por Internet mediante tabletas y teléfonos móviles, las páginas web de tamaño fijo eran demasiado grandes para caber en el viewport. Para solucionar este problema, los navegadores de esos dispositivos redujeron la página web completa para que se ajustara a la pantalla.

¡Esto no fue perfecto! Pero una solución rápida.

Configurando el Viewport

HTML5 introdujo un método para permitir a los diseñadores web tomar control sobre el viewport, a través de la etiqueta <meta>.

Debes incluir el siguiente elemento viewport <meta> en todas sus páginas web:

Ejemplo:

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

Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.

La parte width=device-width del dispositivo establece el ancho de la página para que siga el ancho de la pantalla del dispositivo (que variará según el dispositivo).

La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.

A continuación, se muestra un ejemplo de una página web sin la meta etiqueta viewport y la misma página web con la meta etiqueta viewport:

Tip: Si estás navegando por esta página con un teléfono o una tableta, puedes hacer clic en los dos enlaces de arriba para ver la diferencia.

Tamaño del contenido del Viewport

Los usuarios están acostumbrados a desplazarse por los sitios web verticalmente tanto en dispositivos móviles como de escritorio, ¡pero no horizontalmente!

Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente o alejarse para ver toda la página web, la experiencia del usuario será deficiente.

Algunas reglas adicionales a seguir:

1. NO utilice elementos grandes de ancho fijo: por ejemplo, si una imagen se muestra con un ancho mayor que el viewport, puedes hacer que la ventana gráfica se desplace horizontalmente. Recuerda ajustar este contenido para que quepa dentro del ancho del viewport.

2. NO permitas que el contenido dependa de un ancho particular del viewport para renderizarse bien: dado que las dimensiones de la pantalla y el ancho en píxeles CSS varían ampliamente entre dispositivos, el contenido no debe depender de un ancho particular del viewport para renderizarse bien.

3. Utilice media queries para aplicar diferentes estilos a pantallas pequeñas y grandes: establecer anchos CSS absolutos grandes para elementos de página hará que el elemento sea demasiado ancho para el viewport en un dispositivo más pequeño. En su lugar, considere utilizar valores de ancho relativo, como ancho: 100%. Además, tenga cuidado al utilizar valores de posicionamiento absoluto grandes. Puede hacer que el elemento caiga fuera del viewport en dispositivos pequeños.

Traducido con 💚 desde W3Schools.com