JavaScript BOM Window Screen

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.