Screen and Window Fingerprinting: How Display Properties Track You
Screen dimensions, color depth, and window properties create a unique display fingerprint. Learn how these signals work and how to manage them.
Introduction
Your screen and window properties provide a surprisingly rich fingerprint. Screen resolution, available screen area, color depth, device pixel ratio, and the relationship between inner and outer window dimensions all contribute identifying information. Combined, these signals can narrow your identity significantly.
Screen Properties
Basic Dimensions
screen.width // 1920 - physical screen width
screen.height // 1080 - physical screen height
screen.availWidth // 1920 - available width (minus taskbar if vertical)
screen.availHeight // 1040 - available height (minus taskbar)
screen.colorDepth // 24 - bits per pixel
screen.pixelDepth // 24 - bits per pixel (usually same as colorDepth)
Available vs Total
The difference between screen.height and screen.availHeight reveals the taskbar size and position:
- Windows:
availHeight = height - ~40px(taskbar at bottom) - macOS:
availTop = 25px,availHeight = height - 25px(menu bar at top) - Linux: Varies by desktop environment
This difference alone reveals the operating system.
Device Pixel Ratio
window.devicePixelRatio // 1.0, 1.25, 1.5, 2.0, 3.0
Common values by device type:
| Device Type | Typical DPR |
|---|---|
| Desktop monitors | 1.0, 1.25, 1.5, 2.0 |
| MacBook Retina | 2.0 |
| iPhone | 2.0, 3.0 |
| Android phones | 2.0, 2.625, 3.0 |
Window Properties
Inner vs Outer Dimensions
window.innerWidth // Viewport width (content area)
window.innerHeight // Viewport height (content area)
window.outerWidth // Window width including chrome (borders, scrollbar)
window.outerHeight // Window height including chrome (title bar, borders)
The difference between outer and inner dimensions reveals:
- Browser chrome thickness
- Whether the browser is maximized
- Scrollbar width (which varies by OS and settings)
CSS Media Queries
Media queries provide additional dimension information:
window.matchMedia('(min-width: 1920px)').matches
window.matchMedia('(min-resolution: 2dppx)').matches
window.matchMedia('(color-gamut: p3)').matches
Fingerprinting Entropy
| Signal | Typical Entropy |
|---|---|
| screen.width x height | ~4 bits |
| availWidth x availHeight | ~5 bits |
| devicePixelRatio | ~3 bits |
| colorDepth | ~1 bit |
| inner/outer difference | ~3 bits |
| Combined | ~12-15 bits |
Common Detection Patterns
Detection systems look for:
- Impossible combinations - 3840x2160 screen with DPR 1.0 and 4GB memory (budget hardware with 4K monitor is unusual)
- Headless artifacts -
outerWidth === innerWidthexactly (no browser chrome) - Automation signals - Window dimensions that exactly match common Puppeteer defaults (800x600)
- Platform mismatches - macOS taskbar metrics with Windows User-Agent
How BotCloud Handles Screen Fingerprinting
BotCloud profiles include complete screen and window configuration:
- Screen dimensions match realistic monitor configurations
- Available screen area accounts for OS-specific taskbar/menu bar sizes
- Device pixel ratio is consistent with the claimed display
- Inner/outer window dimensions include realistic browser chrome
- CSS media queries return values consistent with the screen properties
All values are coordinated: a profile claiming 1920x1080 with DPR 2.0 will have appropriate available dimensions, inner/outer relationships, and media query responses.
Best Practices
- Use common screen resolutions - 1920x1080 is the most common desktop resolution
- Ensure DPR matches the claimed display - 2.0 for Retina, 1.0 for most external monitors
- Include realistic browser chrome - outerWidth should be slightly larger than innerWidth
- Match taskbar metrics to OS - Windows has bottom taskbar, macOS has top menu bar
- Set
defaultViewport: nullin Puppeteer to use the profile's viewport instead of the default 800x600