Screen Available Area (availWidth, availHeight)

Available Screen Area

The screen object provides properties that describe the usable portion of the display after operating-system-level elements are excluded.

Properties

Property	Description
screen.availWidth	Width of the screen minus OS UI (e.g., Windows taskbar on the side)
screen.availHeight	Height of the screen minus OS UI (e.g., macOS menu bar + Dock)
screen.availTop	Y offset of the usable area (e.g., height of macOS menu bar)
screen.availLeft	X offset of the usable area (e.g., width of a left-docked taskbar)

Examples by Operating System

macOS (with menu bar 25px and Dock 70px at bottom, 1440×900 screen):

• screen.availWidth = 1440
• screen.availHeight = 805 (900 - 25 menu - 70 Dock)
• screen.availTop = 25
• screen.availLeft = 0

Windows 11 (with taskbar 48px at bottom, 1920×1080 screen):

• screen.availWidth = 1920
• screen.availHeight = 1032 (1080 - 48 taskbar)
• screen.availTop = 0
• screen.availLeft = 0

Practical Use: Positioning Popups

function openCenteredPopup(url, w, h) {
  const left = screen.availLeft + (screen.availWidth - w) / 2;
  const top = screen.availTop + (screen.availHeight - h) / 2;
  window.open(
    url,
    '_blank',
    'width=' + w + ',height=' + h + ',left=' + left + ',top=' + top
  );
}

Multi-Monitor Setups

On multi-monitor configurations, availLeft and availTop can be negative if the secondary monitor is positioned to the left or above the primary. This is important when calculating popup positions.

Browser Support

All properties are widely supported across modern browsers. availTop and availLeft are non-standard but supported in Chrome, Firefox, and Safari.