Ventana gráfica de diseño web adaptable
Tabla de contenido
¿Qué es la ventana gráfica?
La ventana gráfica es el área visible para el 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 únicamente para pantallas de computadora y era común que las páginas web tengan un diseño estático y un tamaño fijo.
Luego, cuando empezamos a navegar por Internet usando tabletas y teléfonos móviles, arreglamos El tamaño de las páginas web era demasiado grande para caber en la ventana gráfica. 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.
Configuración de la ventana gráfica
HTML5 introdujo un método para permitir a los diseñadores web tomar control sobre la ventana gráfica, a través del Etiqueta .
Debe incluir el siguiente 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 para controlar las dimensiones y el escalado de la página.
La parte width=device-width establece el ancho de la página para seguir 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 metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica:
Consejo: Si estás navegando por esta página con un teléfono o una tableta, puedes hacer clic en los dos enlaces anteriores para ver la diferencia.
Tamaño del contenido a la ventana gráfica
Los usuarios están acostumbrados a desplazarse por los sitios web verticalmente tanto en computadoras de escritorio como en dispositivos móviles. dispositivos, ¡pero no en posición horizontal!
Entonces, si el usuario se ve obligado a desplazarse horizontalmente o alejarse para ver la toda la página web da como resultado una mala experiencia de usuario.
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 la ventana gráfica, puede provocar que ventana gráfica para desplazarse horizontalmente. Recuerde ajustar este contenido para que encaje dentro el ancho de la ventana gráfica.
2. NO permita que el contenido dependa de un ancho de ventana gráfica particular para renderizar 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 gráfica particular para rendir bien.
3. Utilice consultas de medios CSS para aplicar diferentes estilos a empresas pequeñas y pantallas grandes: configuración de 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 utilizar valores de ancho relativo, como ancho: 100%. También ser Tenga cuidado al utilizar valores de posicionamiento absolutos grandes. Puede causar que el elemento quedan fuera de la ventana gráfica en dispositivos pequeños.