¿Qué es el viewport en HTML?
TL;DR
En resumen: el viewport en HTML es el área visible de una página web en la pantalla del usuario. Su tamaño cambia con el dispositivo: un teléfono tiene un viewport más pequeño que un monitor de escritorio. Los desarrolladores lo controlan con la etiqueta <meta name=”viewport”> en el <head> del documento HTML.
¿Qué es el viewport?
El viewport es un concepto importante para crear sitios web que funcionen en todos los dispositivos. Sin las etiquetas de viewport necesarias, sus páginas web pueden no mostrarse correctamente en distintos dispositivos. En ProxyWing nos ocupamos de que su contenido web se vea bien en todos los tamaños de pantalla.
Es la parte de una página web que está visible en sus pantallas. Cambia según los navegadores, el dispositivo y las pantallas. Los desarrolladores pueden controlar los diseños, los contenidos y los elementos a través del viewport de HTML. Los diseñadores web se ocupan de que un sitio se vea excelente tanto en las pantallas más pequeñas como en los escritorios grandes controlando los anchos y el alto del viewport.
Por qué el viewport importa para el diseño web y el SEO
El viewport es muy importante para los diseños web, ya que influye en el tamaño y en cómo se miden las unidades. Configurar el viewport correctamente hace que las áreas visibles se ajusten a las necesidades de la paginación. Uno adecuado ayuda a que el contenido web se cargue correctamente en dispositivos más pequeños y en distintos dispositivos, lo que es bueno para el SEO. Las páginas web responsive son más fáciles de encontrar para los motores de búsqueda, ya que se posicionan mejor.
La etiqueta <meta viewport> explicada
Puede usar la etiqueta <meta viewport> para ajustar cómo se adapta su página web a los distintos dispositivos. Ayuda con el viewport visual, los anchos de viewport y las unidades de viewport. Con una configuración adecuada de meta viewport, su sitio se adapta a los tamaños de pantalla de forma sencilla. Esto mejora el uso del sitio tanto en pantallas grandes como en dispositivos más pequeños.
Esta es la etiqueta meta viewport estándar que utilizan la mayoría de las páginas web modernas:
html <meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta línea va dentro de la sección <head> del documento HTML. La parte width=device-width indica al navegador que ajuste el ancho de la página a la pantalla del dispositivo. La parte initial-scale=1.0 fija el nivel de zoom en 100% cuando la página se carga por primera vez. Sin esta etiqueta, los navegadores móviles renderizan las páginas con un ancho de escritorio predeterminado (normalmente 980 píxeles) y luego reducen el resultado para que quepa en la pantalla. El texto se vuelve demasiado pequeño para leerlo y los usuarios se ven obligados a hacer zoom y a desplazarse horizontalmente.
Atributos comunes de la etiqueta viewport
El atributo content de la etiqueta meta viewport acepta varias propiedades. Cada una controla un aspecto distinto de cómo se muestra la página en un dispositivo.
width — define el ancho del viewport. El valor más habitual es device-width, que coincide con el ancho de pantalla del dispositivo. Un número fijo como width=600 también es válido, pero se usa pocas veces.
initial-scale — fija el nivel de zoom cuando la página se carga por primera vez. El valor estándar es 1.0, que significa que no hay zoom. Los valores más bajos reducen la página; los más altos la amplían.
minimum-scale y maximum-scale — definen hasta dónde pueden alejar y acercar el zoom los usuarios. Los valores suelen ir de 0.1 a 10.0. Restringirlos demasiado perjudica la accesibilidad.
user-scalable — controla si el usuario puede hacer zoom con los dedos. Ponerlo en «no» bloquea el zoom, algo que en general se desaconseja porque dificulta la lectura de la página a los usuarios con baja visión.
Una configuración responsive típica solo usa width=device-width y initial-scale=1.0, y deja el zoom activado de forma predeterminada.
El viewport en HTML para dispositivos móviles
El móvil es donde más importa la etiqueta viewport. Los smartphones tienen pantallas de entre 320 y 430 píxeles de ancho, mientras que muchos sitios web están diseñados para anchos de escritorio de 1280 píxeles o más. Sin una etiqueta meta viewport, el navegador móvil reduce todo el diseño de escritorio para que quepa en la pantalla, y el resultado es ilegible.
Definir width=device-width lo resuelve en una sola línea. El navegador usa el ancho real del teléfono y, a partir de ahí, el CSS de la página puede reaccionar mediante media queries, rejillas fluidas o unidades de viewport modernas como vw y vh.
Google utiliza la indexación mobile-first, lo que significa que la versión móvil de una página es la que se usa para posicionarla en los resultados de búsqueda. Una etiqueta viewport ausente o defectuosa es uno de los motivos más habituales por los que una página no supera las comprobaciones de usabilidad móvil de Google.
Unidades de viewport: vw, vh, vmin, vmax
El CSS moderno incluye cuatro unidades cuyo tamaño es relativo al viewport. Son útiles cuando un elemento debe escalar con la pantalla en lugar de mantener un tamaño fijo en píxeles.
- vw (ancho del viewport): 1vw equivale al 1% del ancho del viewport. Un encabezado con font-size: 5vw crece en pantallas anchas y se reduce en las estrechas.
- vh (alto del viewport): 1vh equivale al 1% del alto del viewport. Una sección hero con height: 100vh ocupa toda el área visible con independencia del dispositivo.
- vmin: el 1% de la dimensión menor entre el ancho y el alto.
- vmax: el 1% de la dimensión mayor entre el ancho y el alto.
Estas unidades dependen de que la etiqueta meta viewport esté configurada correctamente. En una página sin width=device-width, el viewport que se comunica al CSS es el ancho de escritorio predeterminado y las unidades dejan de coincidir con lo que el usuario ve en realidad.
Preguntas frecuentes
¿Qué significa viewport en HTML?
El viewport en HTML es la parte de la página web que está visible en ese momento en la ventana del navegador del usuario. No es lo mismo que la página completa: la página puede extenderse más allá del viewport y los usuarios se desplazan para ver el resto.
¿Para qué sirve la etiqueta meta viewport?
La etiqueta meta viewport indica al navegador cómo establecer el tamaño y la escala de la página en el dispositivo actual. Es necesaria para que los diseños responsive funcionen correctamente en teléfonos y tablets.
¿Cuál es el tamaño de viewport predeterminado?
Sin una etiqueta meta viewport, la mayoría de los navegadores móviles adoptan de forma predeterminada un ancho de viewport de unos 980 píxeles y luego reducen el resultado a la pantalla. Por eso las páginas sin la etiqueta se ven alejadas en un teléfono.
¿Es obligatoria la etiqueta meta viewport?
No la exige la especificación de HTML, pero en la práctica es imprescindible para cualquier sitio que deba funcionar en dispositivos móviles. Google marca las páginas que no la tienen como no compatibles con móviles.
¿Cuál es la diferencia entre el ancho del viewport y el ancho de la pantalla?
El ancho de pantalla es el ancho físico en píxeles del dispositivo. El ancho del viewport es el ancho que el navegador comunica al CSS y, con width=device-width, ambos valores coinciden.