0
En esta ocasión en Tutorial en linea aprenderemos a usar la etiqueta <meta> viewport para controlar la composición en los navegadores móviles.¿Qué es la etiqueta <meta> viewport?
El viewport del navegador es el área de la ventana gráfica en donde el contenido web está visible. Generalmente no es del mismo tamaño que la página renderizada, en donde se brindan barras de desplazamiento para que el pueda acceder a todo el contenido.
La vista 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ñaban solo para pantallas de ordenadores, 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 utilizando tabletas y teléfonos móviles, las páginas Web de tamaño fijo eran demasiado grandes para ajustarse a la ventana gráfica. Para solucionar esto, los navegadores en esos dispositivos redujeron la página web completa para ajustarse a la pantalla.
Configuración de la etiqueta viewport
Cuando el navegador renderiza un documento web, hace un escalado de los contenidos para que las páginas que están diseñadas para escritorio se vean de forma aceptable en un dispositivo móvil. En la mayoría de los casos, tendremos que hacer zoom para poder leerlos. Sin embargo, podemos configurar el viewport para indicar qué debe hacer.
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 etiqueta <meta>. Un sitio típico optimizado para móvil contiene algo así:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
o
<meta name="viewport" content="width=device-width, -scalable=no">- width=device-width: Establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará dependiendo del dispositivo).
- width: anchura virtual (emulada) de la pantalla o anchura del viewport.
- height: altura virtual de la pantalla o anchura del viewport.
- initial-scale=1.0: Establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
- initial-scale: la escala inicial del documento.
- minimum-scale: la escala mínima que se puede poner en el documento.
- maximum-scale: la escala máxima configurable en el documento.
- -scalable: si se permite o no al hacer zoom.
El zoom y la escala no deben estar deshabilitados
Deshabilitar el zoom es problemático para los s con baja visión que dependen de la ampliación de la pantalla para ver correctamente el contenido de una página web.
El parámetro -scalable="no" dentro del atributo de contenido del elemento <meta name="viewport"> desactiva el zoom en una página. El parámetro de maximum-scale (escala máxima) limita la cantidad que el puede hacer zoom. Esto es problemático para las personas con baja visión que dependen de los ampliadores de pantalla para ver correctamente el contenido de una página web.
Los s con visión parcial y baja visión a menudo eligen ampliar las fuentes en su navegador para que el texto en la web sea más fácil de leer. El foco de la ventana gráfica del navegador es todo lo que se ve en la ventana del navegador en un momento dado. Maximizar el navegador a tamaño completo en un monitor de alta resolución crea una gran área de enfoque de la ventana gráfica y puede incluir toda la página web.
Si la ventana del navegador es pequeña, el área de enfoque de la ventana gráfica solo incluye una pequeña parte de la página web. El enfoque de la vista del navegador no afecta el enfoque programático. Los s pueden desplazarse hacia arriba y hacia abajo en la página web, pero el enfoque programático no sigue la ventana gráfica. Las pautas de accesibilidad para el contenido Web requieren que los desarrolladores diseñen páginas para que itan un cambio de tamaño de hasta el 200%.
Asegura que el parámetro -scalable="no" no esté presente en el elemento <meta name="viewport"> y que el parámetro de maximum-scale no sea menor que 2.
Comentarios