Screen dimensions play an important role in the creation of dynamic and responsive web pages using media queries. As we know that media queries perform the specified actions according to the screen or viewport dimensions. That’s why the user needs to know about the screen dimension while performing the discussed operations.

This post will explain how to get the width and height of the screen in JavaScript with the following outcomes:

• Method 1: Use “screen.width” Property
• Method 2: Use “screen.height” Property

Let’s start with the “screen.width” property.

Method 1: Use “screen.width” Property to Get the Screen Width

The “screen” object offers the “width” property that calculates the actual width of the user’s screen. It returns the width in “pixels”. In this method, it is used to compute the screen width including the window’s taskbar.

Here is its practical implementation:

In the above code lines, the “console.log()” method is used that applies the “screen.width” property to calculate the screen width and display it in the browser console.

Output

Press F12 to open the browser console:

The console returns the actual screen width in pixels.

Screen Width Without the Taskbar

Most screens have taskbars on their right or left sides. If the user wants to compute the screen width without the taskbar, then use the “screen.availWidth” property.

Let’s see it practically with the help of the following code block:

It can be observed that the console returns the screen width without the taskbar. It is the same as the actual screen width because our screen does not have the taskbar on its left/right side.

Method 2: Use “screen.height” Property to Get the Screen Height

The “screen” object also offers the “height” property that computes the actual height of the user’s screen in “pixels”. For this scenario, it is used to get the screen height including the window’s taskbar.

The following code block shows it practically:

In the above code block, the “console.log()” method is utilized that applies the “screen.height” property to calculate the screen height and display it in the browser console.

Output

The console successfully shows the actual height of the screen including the window’s taskbar.

Screen Height Without the Taskbar

To get the screen height without the taskbar, then use the “screen.availHeight” property. In this scenario, the window’s taskbar is placed at the bottom of the screen.

Follow the given code snippet to see it practically:

Now, the console shows the screen height without the taskbar. It is different from the actual screen height because the taskbar is excluded in this case.

That’s enough about getting the screen width and height in JavaScript.

Conclusion

To get the screen width use the pre-defined “screen.width” property, and for the screen height use the “screen.height” property. Both these properties compute the actual screen width and height including the taskbar. If the user wants to compute the screen width and height without the taskbar, then use the “screen.availWidth” and “screen.availHeight” properties. This post has practically explained all possible ways to get the width and height of the screen in JavaScript.