Open In App

JavaScript BOM Window Screen

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. The BOM allows JavaScript to “interact with” the browser. The object of the window represents a browser window and all its corresponding features. A window object is created automatically by the browser itself. Java Script’s window.screen object contains information about the user’s screen. It can also be written without the window prefix. 

Properties:

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth

Below examples will illustrate all the property’s usage:

HTML screen.width Property: The screen.width property returns the user’s screen width in pixels. 

javascript




<p id="GFG"></p>
  
<script>
    document.getElementById("GFG").innerHTML =
    " The Screen width is " + screen.width;
</script>


Output:

 The Screen width is 1600

HTML screen.height Property: The screen.height property returns the users screen height in pixels.

javascript




<p id="GFG"></p>
  
<script>
    document.getElementById("GFG").innerHTML =
    " The screen height is " + screen.height;
</script>


Output:

The screen height is 900

HTML screen.availWidth Property: The screen.availWidth property returns the users screen width in pixels, excluding the interface features. 

javascript




<p id="GFG"></p>
  
<script>
    document.getElementById("GFG").innerHTML =
    "The available screen width is " + screen.availWidth;
</script>


Output:

The available screen width is 1549

HTML screen.availHeight Property: The screen.availHeight property returns the users screen height in pixels excluding the interface features. 

javascript




<p id="GFG"></p>
  
<script>
    document.getElementById("GFG").innerHTML =
    "The available screen height is " + screen.availHeight;
</script>


Output:

 The available screen height is 876

HTML screen.colorDepth Property: The screen.colorDepth property returns the bits (number) to be used to display one color. Usually, 24-bit or 32-bit hardware is used for color resolution. 24 bits = 16, 777, 216 different (True Colors) 32 bits = 4, 294, 967, 296 different (Deep Colors) 

javascript




<p id="GFG"></p>
  
<script>
    document.getElementById("GFG").innerHTML =
    "The screen color depth is " + screen.colorDepth;
</script>


Output:

The screen color depth is 24

HTML screen.pixelDepth Property: The screen.pixelDepth property returns the pixel depth of the screen. 

javascript




<p id="GFG"></p>
  
<script>
    document.getElementById("GFG").innerHTML =
    "The screen pixel depth is " + screen.pixelDepth;
</script>


Output :

 The screen pixel depth is 24

Supported Browsers:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1 and above
  • Internet Explorer 4 and above
  • Opera 12.1 and above
  • Safari 1 and above

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.



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