Screen Object in Javascript

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.

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:

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.