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?
Gulshan Saini

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Topics

CSS
Gatsby
Browser
HTML
JavaScript
NextJS
Puppeteer
NodeJS
Python
ReactJS
Typescript
VSCode

Related Posts

How to check if a string contains a substring in JavaScript?
January 05, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media