Screen Object in Javascript

Ranjul Arumadi
Last Updated: May 13, 2022

Introduction:

To know about the screen object in Javascript, you should know about BOM(Browser Object Model). You might have heard about the DOM(Document Object Model), which can be considered an API(Application programming interface) for HTML and XML. The DOM represents the contents of the page which can be manipulated using Javascript. The BOM, on the other hand, allows accessing and manipulating the browser window. The screen object is part of the BOM. Let us learn about the screen object in Javascript in this blog.

The Screen Object

We use the screen object to fetch information related to the browser screen. The information will be regarding the current window which is rendered. The window.screen can give the Screen object as the window object is at the top of the scope chain. The screen object can also be accessed without specifying the window.  In those cases, JavaScript will automatically detect the browser window, which is created by JavaScript Runtime Engine.

 

The window object represents the browser's window. Read more about the window object here.

Screen object properties

The screen object in Javascript has the following properties.

PropertyDescription
availHeightReturns the height of the screen without including the windows taskbar.
availWidthReturns the width of the screen without including the windows taskbar.
colorDepthReturns the bit depth of the colour palette for displaying images
heightReturns the total height of the screen
pixelDepthReturns the colour resolution of the screen. The resolution is returned in bits per pixel.
widthReturns the total width of the screen
availTop Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
availLeftReturns the first available pixel available from the left side of the screen.
leftReturns the distance in pixels from the left side of the main screen to the left side of the current screen.
orientationReturns the ScreenOrientation instance associated with this screen.
top Returns the distance in pixels from the top side of the current screen.

screen.width

This property of the screen object in Javascript returns the user's screen width in pixels.

Code:

<!DOCTYPE html>
<html>
<body>
<p id="width"></p>
<script>
document.getElementById("width").innerHTML =
"Screen width: " + screen.width;
</script>
</body>
</html>

Output:

screen.height

This property returns the user’s screen height in pixels.

Code:

<!DOCTYPE html>
<html>
<body>
<p id="width"></p>
<script>
document.getElementById("width").innerHTML =
"Screen width: " + screen.width;
</script>
</body>
</html>

Output:

screen.availWidth

This property returns the user’s screen width in pixels, excluding the interface features.

Code:

<!DOCTYPE html>
<html>
<body>
<p id="availWidth"></p>
<script>
document.getElementById("availWidth").innerHTML =
"Available screen width: " + screen.availWidth;
</script>
</body>
</html>

Output:

screen.availHeight

This property returns the user’s screen height in pixels, excluding the interface features.

Code:

<!DOCTYPE html>
<html>
<body>
<p id="availHeight"></p>
<script>
document.getElementById("availHeight").innerHTML =
"Available screen height: " + screen.availHeight;
</script>
</body>
</html>

Output:

screen.colorDepth

This property returns the bits being used to display one colour.

Code:

<!DOCTYPE html>
<html>
<body>
<p id="colorDepth"></p>
<script>
document.getElementById("colorDepth").innerHTML =
"Screen color depth: "+ screen.colorDepth;
</script>
</body>
</html>

Output:

screen.pixelDepth

This property returns the pixel depth of the screen.

Code:

<!DOCTYPE html>
<html>
<body>
<p id="pixelDepth"></p>
<script>
document.getElementById("pixelDepth").innerHTML =
"Screen pixel depth: " + screen.pixelDepth;
</script>
</body>
</html>

Output:

Frequently Asked Questions:

 

  1. What is the difference between window object and screen object in Javascript?

Ans. Window is the execution context and global object for that context's JavaScript. Screen describes the information about physical screen dimensions.

 

2. What are the uses of the screen object in Javascript?

Ans. The Screen object can improve the UX(user experience) by controlling the UI(user interface) of the website based on the screen size.

Key Takeaways:

In this blog, we have looked at the screen object in Javascript. We have seen its relation with the BOM and discussed its various properties.

 

If you enjoyed reading this article about the screen object in Javascript, check out Free JavaScript Tutorial By Coding Ninjas and 10 Best JavaScript Certifications In 2021.

Was this article helpful ?
1 upvote