Propiedades de pantalla y viewport para el diseño adaptable
Comprende cómo las propiedades de pantalla, viewport y devicePixelRatio apoyan el diseño adaptable, las pruebas y decisiones respetuosas con la privacidad.
Quieres la documentación estructurada de Huella digital?
Este artículo forma parte de la biblioteca editorial. Para pasos de configuración, material de referencia y actualizaciones continuas, entra en la sección de docs.
El diseño adaptable debe responder al espacio disponible para la página, no adivinar quién la usa. El viewport es el área donde se distribuye el documento; las propiedades de pantalla describen un contexto de visualización externo a la página. devicePixelRatio relaciona los píxeles CSS con los físicos y puede cambiar con el zoom o la configuración de pantalla. Estos valores ayudan a elegir un diseño legible, pero no son una identidad fiable del dispositivo.
El viewport y la pantalla responden preguntas distintas
window.innerWidth y window.innerHeight describen el viewport de distribución en píxeles CSS. La especificación CSSOM View también define objetos de pantalla y geometría de ventana, pero cada valor debe usarse para su propósito. Las decisiones de diseño suelen pertenecer a las consultas de medios CSS y al viewport; un valor de pantalla puede describir un área mayor parcialmente oculta por la interfaz del navegador u otras ventanas.
El viewport visual puede diferir del de distribución cuando se amplía la página o aparece el teclado en pantalla. Trata esos cambios como eventos normales de diseño. Una pantalla ancha no implica un viewport utilizable ancho, y dos viewports iguales no demuestran que procedan de la misma pantalla.
Para la configuración relacionada, consulta la guía de pantalla y ventana y la política de proporción de píxeles. Esas páginas explican los límites de configuración del navegador; esta guía se centra en el diseño para usuarios.
Usa las propiedades para crear diseños resistentes
Empieza con contenido y controles útiles en un viewport estrecho, y añade columnas, medios grandes o navegación más densa cuando haya espacio. Las consultas de contenedor y de medios CSS expresan estas decisiones sin una lista de modelos. Cuadrículas flexibles, tamaños intrínsecos, imágenes adaptables y texto que puede ajustarse suelen durar más que las coordenadas fijas.
JavaScript puede observar una necesidad concreta, como cambiar el tamaño de un gráfico o mover un diálogo, mediante ResizeObserver o una coincidencia de consulta de medios. Vincula la respuesta al resultado visible. Un diseño que necesita una región de 640 píxeles no necesita conservar todas las dimensiones de pantalla. La guía de emulación de dispositivos ayuda a probar tamaños representativos sin convertirlos en afirmaciones de identidad.
Si un valor no está disponible, llega tarde o cambia después del zoom, conserva la tarea principal. Un menú puede convertirse en botón, una tabla puede desplazarse y una imagen puede usar una fuente menor. No dejes una zona vacía ni bloquees la lectura solo porque falta una medida preferida.
Ten en cuenta el zoom y la orientación
MDN documenta que devicePixelRatio puede cambiar con el zoom de página o la configuración de pantalla; no es una etiqueta permanente del dispositivo. El zoom puede cambiar la relación entre píxeles CSS y físicos aunque la persona siga en el mismo ordenador. Usa píxeles CSS para el diseño y prueba los niveles de zoom que el producto promete admitir.
Los cambios de orientación pueden redimensionar el viewport y cambiar el viewport visual por separado. Reorganiza títulos, controles y medios en vez de suponer dimensiones fijas para vertical y horizontal. Conserva el foco y el estado de los formularios, y no dependas de un gesto específico de orientación como única forma de completar una acción.
Si una captura o prueba visual usa un factor de escala, regístralo junto al viewport y la versión del navegador. Otra escala puede cambiar las dimensiones del mapa de bits sin cambiar el diseño CSS previsto. Compara resultados visibles y conserva líneas base separadas cuando la prueba apunte deliberadamente a distintas configuraciones.
Prueba resultados accesibles, no categorías de dispositivos
Prueba anchos de viewport, niveles de zoom, cambios de orientación, entrada de teclado y preferencias de movimiento reducido. Comprueba texto legible, foco visible, objetivos utilizables, contraste suficiente y un orden comprensible. Usa longitudes reales además de texto de ejemplo; la localización y el texto del usuario revelan fallos de ajuste.
Mantén las acciones esenciales en HTML semántico. Un canvas o mejora visual puede adaptarse, pero navegación, estados, etiquetas y controles de recuperación deben seguir disponibles para la tecnología de asistencia. Si el espacio no permite la presentación preferida, ofrece una lista, tabla o control simplificado equivalente en lugar de explicar solo que falta espacio.
Las propiedades de pantalla y viewport pueden contribuir a una huella del navegador si se recopilan ampliamente, pero el diseño adaptable no necesita esa recopilación. Solicita solo la medida necesaria para la presentación actual, mantenla en memoria si no hace falta persistencia y explica cualquier almacenamiento o transferencia. No clasifiques a una persona o dispositivo por un ancho, proporción u orientación concretos.
Elegir puntos de cambio según el contenido
CSSOM View separa conceptos geométricos que suelen confundirse. El viewport de diseño es el espacio de coordenadas del documento y el viewport visual es la zona que la persona ve. La interfaz del navegador, las ventanas y el zoom cambian su relación; el objeto de pantalla no describe todo el dispositivo físico.
Un servidor puede entregar un estado inicial conservador y confirmar las condiciones reales en el cliente. La reconciliación debe conservar datos, foco y navegación. Una pista inicial puede mejorar el arranque, pero no debe convertirse en un perfil guardado ni imponerse después al viewport real.
MDN explica que devicePixelRatio relaciona píxeles físicos y CSS y puede cambiar con el zoom. Por eso no debe tratarse como una propiedad permanente del navegador. Recalcula la presentación cuando cambia el zoom o la pantalla.
Las imágenes adaptables y las consultas de resolución pueden elegir recursos distintos, pero deben conservar significado, etiquetas e interacción. Una imagen de mayor densidad no demuestra un modelo concreto y una fuente menor no justifica quitar controles.
La guía de diseño adaptable del W3C favorece diseños flexibles, consultas de medios y contenido que se ajusta al viewport. La decisión puede quedarse en CSS o en una coincidencia breve del cliente, sin guardar un historial de dimensiones.
Si una medida se envía a un servicio, documenta propósito, retención, acceso y funcionamiento sin transferencia. Pide una elección explícita cuando sea opcional y no ocultes valores de pantalla en eventos de analítica no relacionados.
Las pruebas de accesibilidad deben incluir zoom del navegador y ampliación de texto. Comprueba que el foco siga visible, los controles sean alcanzables y la información no dependa de una altura fija en píxeles.
La orientación es una transición de estado, no una categoría de dispositivo. Conserva posiciones de desplazamiento útiles y comunica los cambios importantes con el patrón de estado accesible habitual.
Los componentes incrustados deben responder a su contenedor cuando el espacio local sea lo importante. Así funcionan en ventanas divididas, barras laterales, iframes y marcos redimensionables sin excepciones por modelo.
Una captura de regresión describe una configuración de prueba, no una identidad. Registra viewport, zoom, orientación, versión y preferencias junto a la línea base, y crea otra cuando cambie deliberadamente una entrada.
Revisa la lista de propiedades cuando cambie una función. Elimina valores que ya no impulsan decisiones de usuario y documenta brevemente los que permanezcan para limitar la recopilación accidental.
Gestionar áreas seguras e interfaz temporal
Las áreas seguras, el teclado y las barras del navegador pueden reducir temporalmente el espacio visible. Trátalos como límites de representación y conserva controles semánticos y recuperación.
Hacer explícitas las decisiones de medición y privacidad
Antes de leer una propiedad, anota la decisión de usuario que apoya. Un cálculo local breve y guardar todas las dimensiones de pantalla son prácticas distintas y requieren revisiones distintas.
Documentar una matriz de pruebas práctica
Registra estado del contenido, rango del viewport, zoom, orientación, entrada y resultado accesible esperado. Describe tareas que la persona puede completar, no solo dimensiones.
Resumen
Usa el viewport de diseño para adaptar el contenido, emplea el contexto de pantalla con un propósito documentado y trata devicePixelRatio como variable. Conserva controles semánticos y limita los datos.
La geometría del viewport describe la presentación actual, no un catálogo de dispositivos. La interfaz del navegador y el escalado del sistema también cambian esas condiciones.
El servidor puede entregar un diseño inicial conservador y el cliente actualizarlo sin perder datos, foco ni navegación.
DevicePixelRatio cambia con el zoom, por lo que el dibujo dependiente de escala debe recalcularse cuando cambia.
Las imágenes de distintas densidades deben conservar significado y controles; elegir un recurso no justifica quitar una acción.
Los diseños flexibles y las consultas de medios reducen tanto los puntos de cambio como la necesidad de enviar dimensiones.
Antes de transferir una medida, explica su propósito, retención, acceso y comportamiento sin transferencia.
Las pruebas con texto ampliado deben comprobar foco, botones y tablas, no solo el ancho de la ventana.
Un cambio de orientación debe conservar el desplazamiento útil y comunicar estados importantes de forma accesible.
Los componentes que dependen del espacio local deben responder al contenedor para funcionar en paneles e iframes.
Una línea base visual describe una configuración de prueba, no la identidad de quien la ejecuta.
Después de cambiar una función, elimina propiedades que ya no impulsan decisiones y documenta las restantes.
Así el diseño se mantiene explicable con nuevos navegadores y tamaños de ventana.
Fuentes
Artículos Relacionados
Lleva BotBrowser de la investigación a producción
Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.