Available screen space is accessed through screen.availWidth and screen.availHeight, which report the usable screen dimensions excluding operating system UI elements:
OS-aware: Automatically accounts for taskbars, docks, and system panels
Dynamic value: Can change if user shows/hides taskbars or changes their configuration
More practical than total resolution: Represents actual space available for application windows
Platform-specific: Reflects different OS UI conventions (Windows taskbar, macOS dock, etc.)
2. Background & Purpose
The availWidth and availHeight properties were introduced alongside the basic width and height properties to give developers access to the usable screen space, not just the total resolution.
Why This Distinction Matters
Operating systems reserve screen space for persistent UI elements:
Windows: Taskbar (typically 40-48 pixels at bottom, but can be on any edge)
macOS: Menu bar at top (25-30 pixels) + Dock (variable size, typically at bottom)
Linux: Panels vary by desktop environment (GNOME top bar, KDE panel, etc.)
Original Use Cases
Window Positioning: Position maximized or full-screen windows without overlapping system UI
Pop-up Sizing: Calculate optimal size for pop-up windows that don't exceed available space
Responsive Layout: Adapt interface to actual usable space, not theoretical screen size
Kiosk Applications: Full-screen applications that need to work around taskbars
Example Calculation
Total Screen: 1920×1080 (screen.width × screen.height)
Windows Taskbar: 40 pixels at bottom
Available Space: 1920×1040 (screen.availWidth × screen.availHeight)
Difference: The available height is 40 pixels less, accounting for the taskbar
3. Platform-Specific Behavior
Windows
Taskbar Configuration
Total Resolution
Available Space
Difference
Taskbar at bottom (default)
1920×1080
1920×1040
-40 height
Taskbar on left side
1920×1080
1880×1080
-40 width
Taskbar hidden (auto-hide)
1920×1080
1920×1080
No difference
Large taskbar icons
1920×1080
1920×1032
-48 height
macOS
Configuration
Total Resolution
Available Space
Difference
Menu bar + Dock (bottom)
2560×1440
2560×1355
-25 top, -60 bottom
Dock hidden (auto-hide)
2560×1440
2560×1415
-25 top only
Dock on left/right side
2560×1440
~2490×1415
-70 width, -25 top
Mobile Devices
On mobile devices, the distinction between total and available screen space is less consistent:
iOS: Usually reports the same values for both (no persistent system UI)
Android: May account for navigation bar and status bar, depending on device and Android version
Note: Mobile browsers often hide UI bars when scrolling, so available space can change dynamically
4. Legitimate Uses
Window Management
Maximize Windows: Size pop-ups or modals to fit available space without overlapping taskbar
Multi-Window Applications: Position multiple windows side-by-side within usable space
Centered Positioning: Calculate true center of available screen space
// Center a 800×600 popup in available space
const left = (screen.availWidth - 800) / 2;
const top = (screen.availHeight - 600) / 2;
window.open(url, 'popup', `width=800,height=600,left=${left},top=${top}`);
Full-Screen Applications
Kiosk Mode: Applications that need to occupy all available space without hiding system UI
Video Players: Calculate appropriate size for "theater mode" that doesn't overlap taskbars
Games: Windowed full-screen mode that respects system UI
Responsive Design
Layout Calculations: Determine if there's enough space for multi-column layouts
Image Sizing: Load appropriately-sized images for actual viewable area
Content Prioritization: Decide what content to show based on available space
5. Browser & OS Differences
Consistency Across Browsers
All major browsers (Chrome, Firefox, Safari, Edge) implement screen.availWidth/Height consistently within the same operating system. The values depend on OS configuration, not the browser.
Multi-Monitor Setups
What Gets Reported?
Traditional Behavior: Reports the available space of the primary monitor only
Modern APIs: The newer Screen Orientation API and Window Management API can access information about multiple displays, but screen.availWidth/Height still refers to the primary screen
Edge Cases
Taskbar on Multiple Edges: Some users have taskbars on multiple screen edges (rare)—available space accounts for all of them
Display Scaling: Like screen resolution, affected by Windows display scaling and macOS Retina scaling
Remote Desktop: May report the remote machine's configuration, not your local display
6. Privacy Implications & Tracking Risks
Privacy Risk: MEDIUM
Available screen space provides additional fingerprinting information beyond basic screen resolution, revealing details about your operating system configuration and user preferences.
What Available Screen Space Reveals
1. Operating System UI Configuration
The difference between total resolution and available space can reveal:
Taskbar location: Bottom, top, left, or right side
Taskbar size: Small icons, large icons, or multiple rows
Dock visibility: Whether macOS dock is hidden or visible
Desktop environment: On Linux, which DE you're using (GNOME, KDE, etc.)
2. User Preferences & Habits
Certain configurations reveal usage patterns:
Power Users: Auto-hide taskbars (no difference between total/available) suggest advanced users
Vertical Taskbar: Indicates potential multi-monitor setup or specific workflow preferences
Large Icons: May indicate accessibility needs or visual preferences
Combined Fingerprinting
While available screen space alone isn't highly unique, it adds entropy to fingerprinting when combined with:
Total screen resolution (screen.width × screen.height)
User A: 1920×1080 total, 1920×1040 available → Windows with bottom taskbar
User B: 1920×1080 total, 1920×1080 available → Windows with hidden taskbar OR Linux
User C: 1920×1080 total, 1880×1080 available → Windows with side taskbar
These differences, while subtle, contribute 1-2 bits of identifying information.
Low Risk Compared to Other Attributes
Available screen space is less risky than:
Canvas fingerprinting (highly unique)
Installed fonts (very distinctive)
WebGL renderer (hardware-specific)
But more risky than:
User agent (shared by millions)
Language preference (shared by millions)
7. Protection & Mitigation
1. Tor Browser Protection
Standardized Reporting
Tor Browser reports fake, standardized values for both screen.width/height and availWidth/availHeight, making all users indistinguishable.
Effectiveness: Complete protection against this specific fingerprinting vector
2. Brave Browser
Fingerprinting Protection
With strict fingerprinting protection enabled, Brave randomizes or rounds screen values to reduce uniqueness.
Effectiveness: Partial protection; reduces precision but doesn't eliminate fingerprinting
3. Adjust Taskbar Settings (Not Recommended)
Changing your taskbar configuration solely for privacy purposes is impractical and provides minimal benefit:
Using default taskbar settings makes you less distinctive
Available screen space is just one of many fingerprinting factors
The usability cost outweighs the minor privacy gain
4. Browser Extensions (Limited Effectiveness)
Some anti-fingerprinting extensions attempt to spoof screen values, but this can:
Break window positioning and sizing on legitimate sites
Create inconsistencies that are themselves fingerprintable
Not protect against other fingerprinting methods
Practical Recommendations
General Browsing: Use Firefox or Brave with tracker blocking; accept that available screen space is exposed
Privacy-Sensitive Activities: Use Tor Browser for complete protection
Multi-Layered Approach: Focus on blocking third-party trackers and cookies rather than individual fingerprint attributes
Important Context
Available screen space is one small piece of the fingerprinting puzzle. Focus your privacy efforts on higher-impact protections like blocking third-party cookies, using tracker blockers, and avoiding suspicious websites.