Horje
HTML DOM Screen Object

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

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML DOM Input Text blur() Method HTML DOM Input Text blur() Method
HTML DOM Input URL focus() Method HTML DOM Input URL focus() Method
HTML DOM Marquee scrollDelay Property HTML DOM Marquee scrollDelay Property
HTML DOM Input Search focus() Method HTML DOM Input Search focus() Method
HTML DOM Input Text focus() Method HTML DOM Input Text focus() Method

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje