Get the window screen size using JavaScript

In this short article, we will show you how to get the window screen size using JavaScript.

Here, we will simply use the window.screen to get the height and width of the screen. The window.screen is the object that holds the screen size information.

Get the two different types of the screen size

1. Get the screen size
2. Get the available screen size

1. Get the screen size

screen.height
Returns the height of the screen in pixels.

screen.width
Returns the width of the screen.

const screenHeight = window.screen.height; // Output: 864
const screenWidth  = window.screen.width; // Output: 1536

Look at the following image for your reference.

2. Get the available screen size

screen.availHeight
Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.

screen.availWidth
Returns the amount of horizontal space in pixels available to the window.

const availScreenHeight = window.screen.availHeight; // Output: 824
const availScreenWidth  = window.screen.availWidth; // Output: 1536

Look at the following image. If we compare with the image above, the only difference in height is due to the taskbar.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!!