Prev Next

JavaScript Screen

The screen object provides information about the user's screen, such as its width, height, and color depth. It is a property of the global window object.

Key Topics

Screen Properties

The screen object provides the following properties:

  • width: The width of the screen in pixels.
  • height: The height of the screen in pixels.
  • availWidth: The available screen width, excluding UI features like the taskbar.
  • availHeight: The available screen height, excluding UI features like the taskbar.
  • colorDepth: The number of bits used to display a single color.
  • pixelDepth: The screen resolution in bits per pixel.
console.log("Screen Width:", screen.width);
console.log("Screen Height:", screen.height);
console.log("Available Width:", screen.availWidth);
console.log("Available Height:", screen.availHeight);
console.log("Color Depth:", screen.colorDepth);
console.log("Pixel Depth:", screen.pixelDepth);

Output

> Screen Width: [Screen Width]

> Screen Height: [Screen Height]

> Available Width: [Available Width]

> Available Height: [Available Height]

> Color Depth: [Color Depth]

> Pixel Depth: [Pixel Depth]

Explanation: The screen object properties provide detailed information about the user's screen, such as its resolution and color capabilities.

JavaScript Usage in DOM

Below is a DOM-based example demonstrating the usage of the screen object.

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Screen Example</title>
    </head>
    <body>
        <button onclick="showScreenInfo()">Show Screen Info</button>
        <p id="info"></p>
        <script>
            function showScreenInfo() {
                const info = `
                    Screen Width: ${screen.width} px
                    Screen Height: ${screen.height} px
                    Available Width: ${screen.availWidth} px
                    Available Height: ${screen.availHeight} px
                    Color Depth: ${screen.colorDepth} bits
                    Pixel Depth: ${screen.pixelDepth} bits
                `;
                document.getElementById("info").textContent = info;
            }
        </script>
    </body>
</html>

Key Takeaways

  • Screen Object: The screen object provides properties related to the user's screen.
  • Resolution Details: Use properties like width, height, and availWidth for screen resolution information.
  • Color and Pixel Depth: The colorDepth and pixelDepth properties give details about the screen's display capabilities.
  • Dynamic Display: Use the screen object for responsive and user-aware designs.
Prev Next