Screen Object

The Screen Object is a part of the Browser Object Model (BOM) in JavaScript. It is accessible via window.screen (or simply screen) and provides information about the user’s physical display, such as resolution, available space, color depth, and orientation. This object is read-only, meaning you can retrieve information about the screen but cannot change its physical properties using JavaScript.

The Screen Object is widely used for:

• Responsive design – adjusting layouts according to screen size.
• Analytics – logging display information for user behavior insights.
• Optimizations – detecting mobile vs desktop or adjusting popups and full-screen apps.

Key Properties of the Screen Object

screen.width – Returns the total width of the user’s screen in pixels.

console.log(screen.width);

screen.height – Returns the total height of the user’s screen in pixels.

console.log(screen.height);

screen.availWidth – Provides the width available for the browser content, excluding system UI elements like taskbars or docks.

console.log(screen.availWidth);

screen.availHeight – Provides the height available for browser content, excluding system UI.

console.log(screen.availHeight);

screen.colorDepth – Shows the number of bits used to display colors on the screen, usually 24 or 32.

console.log(screen.colorDepth);

screen.pixelDepth – Represents the number of bits per pixel for color resolution. Often the same as colorDepth.

console.log(screen.pixelDepth);

screen.orientation – Returns the current screen orientation (e.g., portrait-primary, landscape-primary).

console.log(screen.orientation.type);

screen.orientation.angle – Returns the rotation angle of the screen in degrees (0, 90, 180, 270).

console.log(screen.orientation.angle);

Practical Examples

Display Screen Information

<h1>Screen Info</h1>
<p id="demo"></p>

<script>
  const info = `
    Resolution: ${screen.width}x${screen.height}<br>
    Available: ${screen.availWidth}x${screen.availHeight}<br>
    Color Depth: ${screen.colorDepth} bits<br>
    Pixel Depth: ${screen.pixelDepth} bits
  `;
  document.getElementById("demo").innerHTML = info;
</script>

Responsive Design Based on Screen Width

<h1 id="title">Resize the Window</h1>

<script>
  function adjustLayout() {
    const title = document.getElementById("title");
    if(screen.width < 768) {
      title.style.fontSize = "16px";
      title.textContent = "Small Screen Detected";
    } else {
      title.style.fontSize = "24px";
      title.textContent = "Large Screen Detected";
    }
  }

  // Run on load
  adjustLayout();
  // Update on window resize
  window.addEventListener("resize", adjustLayout);
</script>

Detect Screen Orientation

<p id="demo">Orientation: Unknown</p>

<script>
  function updateOrientation() {
    const orientation = screen.orientation ? screen.orientation.type : "Not supported";
    document.getElementById("demo").textContent = `Orientation: ${orientation}`;
  }

  updateOrientation();
  screen.orientation?.addEventListener("change", updateOrientation);
</script>