JS Screen

JavaScript Screen: Monitor Display Metrics & Orientation

The window.screen object contains information about the physical monitor display on which the current browser window is rendering. It provides monitor width, height, available working area, and screen orientation.

Screen Metrics Visualized

flowchart TD
    ScreenArea["Full Monitor Screen (screen.width x screen.height)"] --> Taskbar["OS Taskbar / Menu Bar Space"]
    ScreenArea --> AvailArea["Available Display Area (screen.availWidth x screen.availHeight)"]

Screen Properties Reference

Practical Code Example

// Demonstrating window.screen metrics inspection

console.log("--- Physical Display Metrics ---");
console.log(`Screen Resolution: ${screen.width} x ${screen.height} px`);
console.log(`Available Area (excluding OS taskbar): ${screen.availWidth} x ${screen.availHeight} px`);
console.log(`Color Depth: ${screen.colorDepth}-bit`);

// Screen Orientation API
if (screen.orientation) {
  console.log(`Screen Orientation Type: ${screen.orientation.type}`); // e.g. "landscape-primary"
  
  screen.orientation.addEventListener("change", () => {
    console.log(`New Screen Orientation: ${screen.orientation.type}`);
  });
}

Best Practices & Gotchas

• Do Not Use screen.width for Responsive CSS Layouts: Never use screen.width to make responsive CSS layout decisions. Always use viewport width window.innerWidth or CSS @media (max-width: ...) queries.
• Privacy Restrictions: Modern privacy-focused browsers limit granularity of screen properties to prevent browser fingerprinting tracking.
• Multi-Monitor setups: screen properties reflect metrics of the specific monitor displaying the active browser window.

Self-Check Challenge

Why should responsive design breakpoints be based on window.innerWidth instead of screen.width?