HomeTutorsContact

How to get viewport width and height using JavaScript?

By Gulshan Saini
Published in JavaScript
June 09, 2020
1 min read

Getting viewport width

To detect interior width of the window in pixels we can use innerWidth property.

// viewport width including scrollbar
window.innerWidth

window.innerWidth returns width of window including the scrollbar. To exclude scrollbar we need to use the root <html> element’s clientWidth property instead.

// viewport width excluding scrollbar
document.documentElement.clientWidth

Getting viewport height

To detect interior height of the window in pixels we can use innerHeight property.

// viewport height including horizontal scrollbar
window.innerHeight

window.innerHeight returns height of window including the scrollbar. To exclude scrollbar we need to use the root <html> element’s clientHeight property instead.

// viewport height excluding horizontal scrollbar
document.documentElement.clientHeight

Tags

#javascript
Previous Article
How to detect color preference based on user settings?

Related Posts

JavaScript
How to check if a string contains a substring in JavaScript?
January 05, 2021
1 min
Gulshan Saini

Gulshan Saini

Fullstack Developer

Topics

Angular
JavaScript
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media