Table of contents

Introduction:

The Screen Object

Screen object properties

screen.width

screen.height

screen.availWidth

screen.availHeight

screen.colorDepth

screen.pixelDepth

10.

Frequently Asked Questions:

11.

Key Takeaways:

Last Updated: Mar 27, 2024

Screen Object in Javascript

Author Ranjul Arumadi

Do you think IIT Guwahati certified course can help you in your career?

Yes

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.

Also See, Javascript hasOwnProperty

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.

Property	Description
availHeight	Returns the height of the screen without including the windows taskbar.
availWidth	Returns the width of the screen without including the windows taskbar.
colorDepth	Returns the bit depth of the colour palette for displaying images
height	Returns the total height of the screen
pixelDepth	Returns the colour resolution of the screen. The resolution is returned in bits per pixel.
width	Returns 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.
availLeft	Returns the first available pixel available from the left side of the screen.
left	Returns the distance in pixels from the left side of the main screen to the left side of the current screen.
orientation	Returns 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:

For better practice, you can practice by yourself with the help of an online javascript compiler.

Frequently Asked Questions:

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.

Live masterclass

Crack GenAI Skills to ace 30 LPA+ roles at Amazon & Google

by Sumit Shukla

16 Feb, 2026

03:00 PM

7+ registered

Zero to Google Data Analyst: Roadmap for 30L+ CTC

by Prashant

15 Feb, 2026

06:30 AM

151+ registered

Beginner to GenAI Engineer Roadmap for 30L+ CTC at Amazon

by Shantanu Shubham

15 Feb, 2026

08:30 AM

86+ registered

Data Analysis for 20L+ CTC@Flipkart: End-Season Sales dataset

by Sumit Shukla

16 Feb, 2026

01:30 PM

63+ registered

Crack GenAI Skills to ace 30 LPA+ roles at Amazon & Google

by Sumit Shukla

16 Feb, 2026

03:00 PM

7+ registered

Zero to Google Data Analyst: Roadmap for 30L+ CTC

by Prashant

15 Feb, 2026

06:30 AM

151+ registered

View more events