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.
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.
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.
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.