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 all query string values using JavaScript
- Math functions in JavaScript
- 7 JavaScript One-Liners that you should know
- Generate a random password using JavaScript
- Remove a specific item from an array in 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.
const screenHeight = window.screen.height; // Output: 864
const screenWidth = window.screen.width; // Output: 1536
Look at the following image for your reference.
Screen size - Clue Mediator
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.
Available screen size - Clue Mediator
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
