Huella de pantalla y ventana: seguimiento de la visualización

Los valores de pantalla y ventana son relevantes para la privacidad porque una página puede observar condiciones visuales sin solicitar permiso. Ayudan a adaptar el diseño y pueden aportar contexto a una huella del navegador. Una resolución, tamaño de ventana o proporción de píxeles describe lo que el contexto expone ahora. No prueba una persona, sistema operativo, monitor físico ni ubicación. La ubicación se rige por un permiso aparte, descrito en Permisos de geolocalización y precisión de ubicación en el navegador.

BotBrowser puede controlar valores de pantalla visibles para el navegador en pruebas autorizadas de consistencia, pero no puede cambiar el hardware físico ni el estado de pantalla del sistema operativo anfitrión.

TL;DR

• screen.width describe la pantalla que el navegador expone, mientras que window.innerWidth describe el área de diseño que ocupa el documento; ninguna de las dos, por separado, identifica un monitor o una ventana.
• availWidth y availHeight se reducen cuando una interfaz del sistema, un dock o una sesión remota reserva espacio, y el tamaño de esa diferencia no nombra el sistema que la reserva.
• devicePixelRatio sigue el escalado de pantalla y el zoom de página, mientras que visualViewport.scale sigue el zoom con gesto; ambos pueden cambiar en una misma sesión sin ningún cambio de hardware.
• En una sesión headful de escritorio --bot-screen y --bot-window usan real por defecto; fija ambos en profile para aplicar el perfil cargado, o pasa valores WxH o JSON explícitos.

Contenido

• Ver el video
• Pantalla y área disponible
• Ventana, viewports y zoom
• Privacidad y diseño adaptable
• Validación acotada
• Capacidad y límites de BotBrowser
• Conclusión práctica

Ver el video

Este video en inglés explica de qué superficie de visualización procede cada número que lee una página, ejecuta una prueba local controlada en la que un marco redimensionado hace las veces de ventana y muestra qué demuestran y qué no demuestran esos valores declarados. La prueba usa una sola versión del navegador en un solo host, sin perfil de BotBrowser ni zoom; muestra cómo se relacionan las superficies, no qué es una pantalla, un host o una persona reales. El audio está en inglés.

Pantalla y área disponible

Screen expone width, height, availWidth, availHeight, colorDepth y pixelDepth. El navegador comunica la pantalla que contiene la ventana en píxeles CSS. El área disponible puede excluir interfaz persistente del sistema. Son observaciones del navegador, no un inventario de hardware. Varias pantallas, escalado, rotación, conexión, escritorio remoto y accesibilidad pueden cambiar estos valores. Una diferencia de área no identifica una persona ni un sistema operativo.

Un píxel CSS no equivale necesariamente a un píxel físico. Las media queries muestran condiciones de renderizado relacionadas, no números de serie de monitor; Fingerprinting CSS: cómo las hojas de estilo te rastrean explica cómo se usan estas características de estilo para el rastreo. colorDepth y pixelDepth tampoco prueban HDR, gama completa, calibración o accesibilidad visual.

Ventana, viewports y zoom

window.innerWidth e innerHeight describen el viewport de diseño, incluida la barra vertical cuando existe. outerWidth y outerHeight describen el límite de ventana expuesto por el navegador. Su relación depende de interfaz, barras, estado y plataforma. El viewport visual es la parte visible y puede cambiar con interfaz móvil, teclado en pantalla o zoom con gesto. visualViewport, cuando existe, comunica ese espacio en píxeles CSS.

El zoom de página y el zoom con gesto son distintos. El primero puede cambiar la escala CSS y devicePixelRatio; el segundo cambia principalmente el viewport visual. Mover una ventana entre pantallas con escalado distinto también puede cambiar la proporción. Lee estas señales como condiciones actuales, no como identidad estable.

Privacidad y diseño adaptable

Una combinación cambiante de pantalla, área, viewport, zoom y proporción puede aportar contexto a otras observaciones, pero no demuestra quién usa el navegador ni qué host originó todos los valores. Recoge solo lo necesario para diseño o soporte y no conviertas inventarios visuales en identidad de cuenta. Los diseños adaptables deben usar el viewport de diseño, no la pantalla completa: una ventana dividida puede ser mucho menor que screen.width.

Para recursos de imagen, separa el tamaño CSS de los píxeles del bitmap. Una imagen más densa puede mejorar la legibilidad; no prueba un modelo de pantalla. Conserva reflujo, zoom y alternativas accesibles. Un teclado puede ocultar un campo y un viewport visual reducido puede requerir reposicionar un control, no recopilar una nueva señal.

Validación acotada

Compara recorridos equivalentes y registra modo headed o headless, viewport, zoom y disposición de pantallas. Prueba redimensionamiento, cambio de pantalla, rotación o conexión relevante, zoom de página, zoom con gesto e interfaz móvil. Si falta una API, conserva el flujo normal. El resultado debe decir qué comportamiento visible funcionó, qué sigue sin conocerse y qué acción corresponde; no debe clasificar a la persona usuaria.

Por ejemplo, un formulario debe seguir mostrando etiquetas, foco y envío cuando una persona amplía la página. Un control flotante debe respetar el contenido visible y el teclado durante zoom con gesto. Redibujar un lienzo tras mover una ventana prueba compatibilidad de la aplicación bajo esas condiciones, no una configuración permanente de múltiples monitores.

Capacidad y límites de BotBrowser

BotBrowser documenta controles basados en perfiles para información de pantalla y ventana comunicada a páginas. En una configuración seleccionada puede ayudar a la consistencia visual en pruebas autorizadas de privacidad y compatibilidad. Solo cubre APIs visibles para el navegador: no modifica hardware, ajustes de pantalla del sistema ni enumeración fuera del proceso. Un modo de ventana real puede reflejar redimensionamiento y varias pantallas. Valores headless controlados por perfil no garantizan paridad con cada navegador headed. Verifica el perfil y runtime elegidos.

Consulta proporción de píxeles y renderizado, privacidad entre superficies y huella de permisos.

Conclusión práctica

El orden de la revisión decide si una observación de pantalla significa algo. Nombra primero la superficie de la que depende la tarea (Screen, el viewport de diseño, el viewport visual o devicePixelRatio) y registra después el modo del navegador, el estado de la ventana y el nivel de zoom que produjo el valor. Una comparación entre dos sesiones solo es válida cuando esas condiciones coinciden.

Para el trabajo de interfaz, decide el diseño a partir de window.innerWidth y coloca los controles temporales con visualViewport, manteniendo el documento legible cuando esa API no existe. Trata availWidth y availHeight como límites del espacio que recibe una ventana, no como una descripción de la plataforma.

En una prueba autorizada con BotBrowser, carga el perfil previsto, fija --bot-screen=profile y --bot-window=profile juntos en una sesión headful y confirma los valores comunicados en las páginas del recorrido. Un valor de pantalla explica qué expuso el contexto del navegador en ese momento; no identifica el host, el monitor ni la persona.

Fuentes

• BotBrowser: pantalla y ventana
• W3C CSSOM View Module
• MDN: Screen
• MDN: Window
• MDN: Window.devicePixelRatio
• MDN: VisualViewport