HTML DOM Screen Object

Last Updated : 12 Feb, 2022

The Screen Object in HTML DOM is used to retrieve the information about the visitor; s or client screen. such as height and width of the screen and color resolution of the client screen.

Note: There is no public standard that applies to the screen object.

The Screen Object has some Properties:

availHeight: It is used to return the height of the clients screen but it does not include the window taskbar.
availWidth: It is used to return the width of the client screen but it does not include the windows taskbar.
colorDepth: It is used to return the bit depth of the color palette for displaying images, in bits per pixel.
Height: It is used to return the whole height of the visitors screen.
pixelDepth: It is used to return the color resolution of the visitor screen.
width: It is used to return the whole width of the visitors screen.

Example: Below HTML code returns the height and width of the visitor's screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Returning the Screen height 
        and width Property in HTML
    </title>

    <style>
        h1 {
            color: green;
        }

        h2 {
            font-family: Impact;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>
        Returning the Screen height and 
        width Property in HTML
    </h2>
    
    <p>
        For checking the screen's total height,
        double click the "Check Height" button:
    </p>

    <br>
    <p>
        For checking the screen's total width,
        double click the "Check width" button:
    </p>

    <button ondblclick="check_height()">
        Check Height
    </button>

    <button ondblclick="check_width()">
        Check width
    </button>
    
    <p id="height"></p>

    <script>
        function check_height() {
            var h = "Total Screen Height In Pixels : "
                + screen.height;

            document.getElementById("height").innerHTML = h;
        }

        function check_width() {
            var w = "Total Screen width In Pixels : "
                + screen.width;
                
            document.getElementById("height").innerHTML = w;
        }
    </script>
</body>

</html>

Output:

Example 2: Below HTML CODE returns the pixelDepth property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Screen Object
    </title>
    
    <style>
        h1 {
            color: green;
        }

        h2 {
            font-family: Impact;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>HTML DOM Screen Object</h2>
    
    <p>
        For checking the screen's pixel depth,
        click the "submit" button:
    </p>

    <button onclick="check_pixel_depth()">
        Submit
    </button>

    <p id="geeks"></p>

    <script>
        function check_pixel_depth() {
            var r = "Pixel depth in bits per pixel : "
                + screen.pixelDepth;
                
            document.getElementById("geeks").innerHTML = r;
        }
    </script>
</body>

</html>