Open In App

HTML DOM Screen Object

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera mini


Last Updated : 12 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads