This changes when you resize your browser window. Try it!
Window size is accessed through window.innerWidth and window.innerHeight, which report the dimensions of the browser's viewport (the visible content area):
Window dimensions have been available in JavaScript since the early days of the web. window.innerWidth and window.innerHeight specifically represent the "viewport"—the actual space available for rendering web content.
screen.width/height): Total monitor resolution (e.g., 1920×1080)screen.availWidth/availHeight): Screen minus taskbars (e.g., 1920×1040)window.innerWidth/innerHeight): Browser viewport only (e.g., 1200×800)// Viewport dimensions (most commonly used)
window.innerWidth // Width of viewport (includes scrollbar on some browsers)
window.innerHeight // Height of viewport
// Outer dimensions (includes browser chrome)
window.outerWidth // Width including toolbars, sidebars, etc.
window.outerHeight // Height including address bar, tabs, etc.
// Document dimensions
document.documentElement.clientWidth // Similar to innerWidth (excludes scrollbar)
document.documentElement.clientHeight // Similar to innerHeight
| Window State | Typical Dimensions | Usage Scenario |
|---|---|---|
| Maximized (1920×1080 screen) | ~1920×950 | Most common desktop browsing state |
| Half-screen (split view) | ~960×950 | Multi-tasking with two windows side-by-side |
| Windowed (medium) | ~1200×800 | Default window size on many browsers |
| Narrow window | ~800×600 | Testing responsive designs or constrained space |
| Ultra-wide maximized | ~3440×1350 | Ultra-wide monitor (21:9 aspect ratio) |
| Device Category | Portrait | Landscape |
|---|---|---|
| Phone (small) | ~360×640 | ~640×360 |
| Phone (standard) | ~390×844 | ~844×390 |
| Phone (large) | ~428×926 | ~926×428 |
| Tablet (iPad) | ~820×1180 | ~1180×820 |
Web developers typically use these breakpoints for responsive design:
// Example: Detect mobile vs desktop
function isMobile() {
return window.innerWidth < 768;
}
// Adjust layout on resize
window.addEventListener('resize', () => {
if (isMobile()) {
showMobileMenu();
} else {
showDesktopMenu();
}
});
Behavior: window.innerWidth typically includes the scrollbar width (~15-17px)
Result: Content width may be less than reported innerWidth
Behavior: Scrollbars overlay content by default (don't consume space)
Result: innerWidth represents actual content width
Note: Users can change this in System Preferences to "always show scrollbars"
Mobile browsers show/hide UI elements while scrolling:
On high-DPI displays (Retina, 4K), window.innerWidth/Height reports CSS pixels, not physical pixels:
window.devicePixelRatio| Browser | Behavior | Quirks |
|---|---|---|
| Chrome/Edge | Consistent behavior | Includes scrollbar on Windows/Linux |
| Firefox | Consistent behavior | Includes scrollbar on Windows/Linux |
| Safari | Overlay scrollbars | innerWidth = content width (no scrollbar deduction) |
| Mobile Safari | Dynamic innerHeight | Changes as address bar shows/hides |
Window size contributes to device fingerprinting, though it's more variable than screen resolution. Tracking risk depends on whether you frequently resize windows or browse maximized.
High Variability: Users who frequently resize windows are harder to track via window size
Maximized Users: Always-maximized users have consistent window size (close to screen resolution), making tracking easier
If you always browse maximized, window size closely approximates screen resolution:
This gives trackers two data points confirming the same information, increasing confidence.
Window size can reveal usage patterns:
Window size contributes entropy when combined with:
If you consistently use the same window size (especially maximized), it becomes a stable identifier across browsing sessions, even if you clear cookies.
Window size is generally less risky than screen resolution because:
Protection Method: Rounds window size to multiples of 200×100 pixels
Example: Actual 1234×856 → Reported as 1200×800
Effect: Groups users into buckets, reducing uniqueness
Letterboxing: Adds gray borders to make actual viewport match rounded size
Strict Fingerprinting Protection: Rounds viewport dimensions to reduce precision
Effect: Partial protection; less aggressive than Tor
Some anti-fingerprinting extensions attempt to spoof window.innerWidth/Height, but:
Window size is one of the more controllable fingerprinting attributes (you can resize anytime), but also one of the least impactful. Focus your privacy efforts on blocking third-party trackers and cookies rather than obsessing over window dimensions.