JavaScript

The window.screen object provides information about the user’s screen, such as screen width, height, color depth, and more.

This is useful when you want to:

• Make UI responsive based on screen size
• Detect screen resolution
• Create fullscreen experiences

---

🔹 What is window.screen?

window.screen is a built-in JavaScript object that contains properties about the user’s physical display screen.

console.log(window.screen); // Displays all screen properties

You don’t need to include window. — it’s optional since it’s the global object.

---

🔸 Common window.screen Properties

Property	Description
screen.width	Total screen width (in pixels)
screen.height	Total screen height (in pixels)
screen.availWidth	Width excluding system UI (taskbars, etc.)
screen.availHeight	Height excluding system UI
screen.colorDepth	Number of bits used to display colors
screen.pixelDepth	Color resolution (usually same as colorDepth)

---

🔍 Examples

✅ Get Full Screen Size

console.log("Screen Width:", screen.width);
console.log("Screen Height:", screen.height);

✅ Get Available Screen Size

console.log("Available Width:", screen.availWidth);
console.log("Available Height:", screen.availHeight);

✅ Get Color Info

console.log("Color Depth:", screen.colorDepth + " bits");
console.log("Pixel Depth:", screen.pixelDepth + " bits");

---

🎯 Use Case: Fullscreen Check Before App Load

if (screen.width < 768) {
  alert("You are using a small screen. Some features may be limited.");
}

---

✅ Summary

Property	Use Case
screen.width & screen.height	Detect total screen size
screen.availWidth & availHeight	Detect usable area (excluding OS UI)
colorDepth & pixelDepth	Detect screen color quality

---

🧪 Try It Yourself (Mini Project)

Create a button that shows all screen information when clicked:

<button onclick="showScreenInfo()">Get Screen Info</button>

<script>
  function showScreenInfo() {
    alert(
      "Screen Width: " + screen.width + "\n" +
      "Screen Height: " + screen.height + "\n" +
      "Available Width: " + screen.availWidth + "\n" +
      "Available Height: " + screen.availHeight + "\n" +
      "Color Depth: " + screen.colorDepth
    );
  }
</script>

---