¿Cuál es la ventana gráfica?
La mirilla es zona visible del usuario de una página web.
La ventana gráfica varía con el dispositivo, y será más pequeño en un teléfono móvil que en una pantalla de ordenador.
Antes de las tabletas y los teléfonos móviles, las páginas web se han diseñado sólo para las pantallas de ordenador, y era común para las páginas web que tengan un diseño estático y un tamaño fijo.
Entonces, cuando comenzamos a navegar por internet usando las tabletas y los teléfonos móviles, páginas web tamaño fijo eran demasiado grandes para caber la ventana gráfica. Para solucionar este problema, los navegadores de los dispositivos de escala reducida toda la página Web para ajustarse a la pantalla.
Esto no era perfecto !! Pero una solución rápida.
Ajuste de la ventana gráfica
HTML5 introdujo un método para que los diseñadores web tienen control sobre la ventana gráfica, a través de la <meta> etiqueta.
Debe incluir la siguiente <meta> elemento de ventana gráfica en todas sus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un <meta> viewport da las instrucciones de su navegador sobre cómo controlar las dimensiones y la escala de la página.
La width=device-width la parte establece el ancho de la página para seguir a la pantalla de una anchura del dispositivo (que variará dependiendo del dispositivo).
La initial-scale=1.0 parte establece el nivel de zoom inicial cuando la página se carga por primera vez por el navegador.
Aquí hay un ejemplo de una página web sin la etiqueta meta ventana gráfica, y la misma página web con la etiqueta meta ventana gráfica:
Consejo: Si está explorando esta persona con un teléfono o una tableta, puede hacer clic en los dos enlaces para ver la diferencia.
Tamaño de contenido a la ventana gráfica
Los usuarios se utilizan para desplazarse verticalmente sitios web tanto en el escritorio y dispositivos móviles - pero no de forma horizontal!
Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente, o alejar la imagen, para ver toda la página web que se traduce en una experiencia de usuario pobre.
Algunas reglas adicionales a seguir:
1. No utilizar grandes elementos de ancho fijo - Por ejemplo, si una imagen se visualiza en una anchura mayor que la ventana se puede hacer que la ventana gráfica para desplazarse horizontalmente. Recuerde que debe ajustar este contenido para que quepa en el ancho de la ventana gráfica.
2. No deje que el contenido se basan en un ancho de visualización particular, para rendir bien - Desde dimensiones de la pantalla y la anchura en píxeles CSS varían ampliamente entre los dispositivos, el contenido no debe depender de un ancho de ventana particular, para hacer así.
3. Uso consultas de medios CSS para aplicar un estilo diferente para pantallas pequeñas y grandes - Ajuste de grandes anchos de CSS absolutos de los elementos de página, se hace que el elemento sea demasiado amplia para la ventana gráfica en un dispositivo más pequeño. En su lugar, considere el uso de valores de anchura relativos, como width: 100%. Además, tenga cuidado de usar grandes valores de posicionamiento absoluto. Se puede hacer que el elemento caiga fuera de la ventana gráfica en dispositivos pequeños.