Viewport
Contenido
¿Qué es el viewport?
El viewport es una etiqueta meta de HTML5 que indica el tamaño de la ventana o área visible de una pantalla, generalmente, de dispositivos móviles como smartphones o tablets, por lo que juega un rol crucial en la optimización móvil.
En este sentido, el meta elemento viewport se encarga de escalar los contenidos a mostrar, adaptando las páginas web a la longitud y anchura de cualquier dispositivo y asegurándose de que todo el contenido sea legible y se muestre de forma correcta y completa en cualquier pantalla, ya sea de smartphone o de tablet.
Información general acerca de los viewports
Gracias al viewport, los sitios web no se muestran de la misma manera en los dispositivos móviles que en las pantallas de las desktops. Esto evita que las usuarias y usuarios tengan que hacer zoom para visualizar una web, pues las páginas se muestran perfectamente adaptadas al tamaño de una pantalla pequeña.
Asimismo, el viewport como un meta elemento combinado con un diseño responsive, ayuda a los navegadores a dividir las páginas web y reensamblarlas para que se vean adecuadamente desde los smartphones o tablets, permitiendo de este modo que las y los navegantes pueden visualizar una imagen móvil legible y de buena calidad.
Por lo tanto, los viewport cumplen con la tarea de prevenir problemas de visualización en las pantallas pequeñas, al determinar formatos de salida adaptados a los respectivos dispositivos móviles.
Funcionalidad del viewport en HTML y CSS
El viewport puede ser integrado en los archivos HTML de dos maneras: 1. Directamente en el documento. 2. Referenciado en un archivo CSS. En cualquiera de estos casos, la sintaxis apenas difiere.
Así pues, para incluirlo en el archivo HTML como una metaetiqueta, se utiliza el código:
<meta name=viewport content="width=device-width, initial-scale=1">
En este caso se define el valor width (amplitud) para poder adaptar al ancho de la pantalla del dispositivo respectivo (width=device-width), mientras que valor initial-scale representa el zoom inicial que debe tener la página y, en este caso, está señalando que se mostrará en un formato de 1:1 en la pantalla del dispositivo.
Igualmente, también se puede utilizar el viewport para definir la altura y configurar el zoom máximo o mínimo. Además, esta metaetiqueta puede impedir que las y los usuarios puedan hacer zoom (user-scalable=no), lo que es especialmente útil para las aplicaciones.
Si, por otra parte, se utilizan los archivos CSS, el viewport se podría colocar justo al inicio del archivo para asegurar que se muestre de manera adecuada, como en el ejemplo que sigue:
@viewport {
width: device-width;
}
Posibles complicaciones de usar el viewport
La principal complicación con los viewports es el incremento en el número de dispositivos con diferentes dimensiones.
Sin embargo, para lograr una visualización óptima en todos los móviles existen diversas herramientas y softwares para revisar el correcto funcionamiento en la mayoría de las pantallas pequeñas, entre ellas: iOS MIH, Ghostab y Adobe Edge Inspect (también disponible para Windows). Aunque, de manera adicional, lo más recomendado es que se realicen pruebas reales de visualización en los smartphones
Otra de las posibles dificultades es la densidad de los píxeles que, aunque no tiene relación al tamaño de la pantalla sino a la profundidad, es decisivo para la visualización ideal en las pantallas de los dispositivos móviles.
Dicho así y aunque se sabe que los píxeles son unidades constantes, los dispositivos móviles suelen tener mucho mejor densidad que las desktops más antiguas. Por esta razón, es importante que las/los desarrolladoras/es tengan en mente cuánto contenido puede mostrarse en una pantalla y cuál es la escala apropiada para que se pueda visualizar correctamente.
Importancia práctica
Los viewports deberían estar especificados tanto en el código HTML como en el archivo CSS de todos los sitios web para asegurar que las páginas puedan mostrarse apropiadamente en cualquier dispositivo.
Asimismo, dentro del contexto de un diseño web responsive, el uso del meta elemento viewport es indispensable y se ha estandarizado en la optimización móvil, por lo que toda/o webmaster que quiera ofrecer a sus visitantes una buena experiencia de lectura y navegación, debería considerar este tema, pues el número de usuarios y usuarias móviles aumenta continuamente.
En resumen: preguntas frecuentes acerca del viewport
¿Para qué se utiliza el término viewport?
El término se utiliza para referirse al área visible o disponible de la pantalla, pero en general, se hace mención a cuando se habla de dispositivos móviles.
¿Qué es el viewport en HTML5?
El viewport es una etiqueta meta de HTML 5 que se utiliza para escalar el contenido de una web acorde a los diferentes dispositivos. Es por ello que se considera una parte fundamental del diseño responsive.
¿Cómo se especifican los viewports en los sitios web?
Los viewports se integran en el código HTML y en el archivo CSS.
¿Los viewports son importantes para un sitio web?
Así es. Desde que los viewports juegan un papel importante en la optimización de dispositivos móviles y diseño responsive, son de suma utilidad y relevancia para todo tipo de sitio web.
Ampliar conocimientos
- https://desarrolloweb.com/articulos/etiqueta-meta-viewport.html
- https://developer.mozilla.org/es/docs/Glossary/Viewport
| Sobre las autoras y autores: |
 |
Contenidos relacionados