Diseño Web Responsivo - El Viewport
¿Qué es el mirador?
La ventana gráfica 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.
¡¡Esto no fue perfecto!! Pero una solución rápida.
Configuración de la ventana gráfica
HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica a través de la
<meta>etiqueta.
Debe incluir el siguiente <meta>elemento de ventana gráfica en todas sus páginas web:
<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 width=device-widthparte establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1.0parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Este es un ejemplo de una página web sin la metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica:
Sugerencia: si está navegando por esta página con un teléfono o una tableta, puede hacer clic en los dos enlaces de arriba para ver la diferencia.
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 use elementos grandes de ancho fijo: por ejemplo, si una imagen se muestra con un ancho mayor que la ventana gráfica, puede hacer que la ventana gráfica se desplace horizontalmente. Recuerde ajustar este contenido para que se ajuste al ancho de la ventana gráfica.
2. NO permita 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. Use 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, considere usar valores de ancho relativo, como ancho: 100%. Además, tenga cuidado al usar valores de posicionamiento absolutos grandes. Puede hacer que el elemento quede fuera de la ventana gráfica en dispositivos pequeños.