Advance JavaScript (DOM, BOM, Web API) / Browser Object Model (BOM)

Screen

📌 What is screen?

The screen object provides information about the user’s physical screen (monitor),

not the browser window.

👉 It is part of the BOM and accessed via window.screen.

window.screen === screen // true

🧩 Common screen Properties

1️⃣ screen.width & screen.height

console.log(screen.width);
console.log(screen.height);

Explanation:

Returns the total screen resolution (including taskbars, docks).

2️⃣ screen.availWidth & screen.availHeight

console.log(screen.availWidth);
console.log(screen.availHeight);

Explanation:

Returns the usable screen size, excluding OS UI (taskbar, menu bar).

3️⃣ screen.colorDepth

console.log(screen.colorDepth);

Explanation:

Number of bits per pixel used to display colors.

4️⃣ screen.pixelDepth

console.log(screen.pixelDepth);

Explanation:

Color depth per pixel (usually same as colorDepth).

📐 Screen Orientation

5️⃣ screen.orientation

Detect Orientation Change

🧠 Screen vs Window Size

🎯 Practical Use Cases

Use Case

Why

Responsive logic

Large screens vs small

Fullscreen apps

Use full resolution

Orientation apps

Mobile/tablet UI

Analytics

Device type detection

⭐ Important Notes

  • screen does not change on resize

  • Window resize affects innerWidth, not screen

  • Mainly used for device-level decisions

✅ Summary

  • screen gives physical display info

  • Part of BOM under window

  • Useful for responsive and device-aware apps