in

Ventana gráfica de diseño web adaptable


¿Qué es The Viewport?

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 una pantalla de computadora.

Antes de las tabletas y los teléfonos móviles, las páginas web se diseñaron 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 en esos dispositivos redujeron la página web completa para adaptarse 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.

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

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

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

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

Aquí hay un ejemplo de una página web. sin la metaetiqueta de la ventana gráfica y la misma página web con la metaetiqueta de la ventana gráfica:

Propina: 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.


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 es deficiente.

Algunas reglas adicionales a seguir:

1. NO utilice elementos grandes de ancho fijo – Por ejemplo, si una imagen se muestra con un ancho más ancho que la ventana gráfica, puede hacer que ésta 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 renderizarse bien – Dado que las dimensiones y el ancho de la pantalla en píxeles CSS varían ampliamente entre dispositivos, el contenido no debe depender de un ancho de ventana en particular para renderizarse bien.

3. Utilice consultas de medios CSS para aplicar diferentes estilos para pantallas grandes y pequeñas. – Establecer anchos CSS absolutos grandes para los elementos de la 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 con el uso de valores de posicionamiento absolutos grandes. Puede hacer que el elemento se salga de la ventana gráfica en dispositivos pequeños.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Escudo azul de California

Operadores PHP – javatpoint