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
Returns the height of the screen in pixels.
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
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.
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..!! 🙂