Qué es el Viewport?

El Viewport es el área visible del usuario de una página web. La ventana gráfica 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 estaban diseñadas solo para pantallas de computadora, y era común que las páginas web tuvieran un diseño estático y un tamaño fijo. Luego, cuando comenzamos a navegar por Internet usando tabletas y teléfonos móviles, las páginas web de tamaño fijo eran demasiado grandes para caber en la ventana gráfica. Para solucionar esto, los navegadores de esos dispositivos redujeron toda la página web para que se ajustara a la pantalla.

Configuración del Viewport

HTML5 introdujo un método para permitir a los desarrolladores web tomar control acerca del Viewport, a través de la etiqueta <meta>.

<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 establece el ancho de la página para seguir el ancho de 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.

Ajustar el tamaño del contenido a la ventana gráfica

Los usuarios están acostumbrados a desplazarse por los sitios web verticalmente en dispositivos móviles y 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 usar elementos grandes de ancho fijo: por ejemplo, si una imagen se muestra con un ancho mayor que la ventana gráfica, puedes hacer que la ventana gráfica se desplace horizontalmente. Recuerda ajustar este contenido para que se ajuste al ancho de la ventana gráfica.

2. NO permitas que el contenido dependa de un ancho de ventana en particular para mostrarse 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 de ventana en particular para mostrarse bien.

3. Usa consultas de medios CSS para aplicar diferentes estilos para pantallas pequeñas y grandes: establecer anchos CSS absolutos grandes para elementos de página hará que el elemento sea demasiado ancho para la ventana gráfica en un dispositivo más pequeño. En su lugar, considera usar valores de ancho relativo, como ancho: 100%. Además, ten cuidado al usar valores de posicionamiento absolutos grandes. Puedes hacer que el elemento quede fuera de la ventana gráfica en dispositivos pequeños.