How to get the screen size in JavaScript
In this short article, we will show you how to get the screen size in 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.
Checkout more articles on JavaScript
Get the two different types of the 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.
1 2 | 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.
1 2 | 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..!! 🙂
