Get viewport width and height in JavaScript (with examples)

Monitor on desk
Photo by Format. Source: Pexels

Sometimes you need to get the viewport width (or height) in JavaScript – probably to adjust an element based on the window size. The good news is, it’s easy and quick! Let’s see how.

What is the viewport size? You may ask.

Here’s an explanation:

In a web browser context, the term viewport (more precisely, the layout viewport) refers to the area of the document you’re currently viewing in the browser window; Content outside the viewport is not visible onscreen until scrolled into view. And the viewport size is the dimensions of this rectangular area.

But how do you find the width and height of a viewport in JavaScript (yes, without jQuery)?

First of all, you need to answer the following question:

Do I need a viewport width (or height) without or without the vertical scrollbar? 🤔

Let’s see how we can solve both use cases.

JavaScript get viewport width , including the vertical scrollbar

To get the viewport width, including the vertical scrollbar (if there’s one), all you need is the window.innerWidth property – a read-only property that gives you the “interior” viewport width in pixels.

 console.log(window.innerWidth)
// output would be an integer value indicating the layout viewport width in pixels. Example: 1343 

And here's how you'd do it for the layout viewport's height:

 console.log(window.innerHeight)
// output would be an integer value indicating the layout viewport width in pixels. Example: 1343 

Please note the value of the window.innerHeight property will include the horizontal scrollbar's height.

The window.innerWidth and window.innerHeight properties are compatible with most browsers, but, of course, except for IE! Who uses IE these days anyway?

InnerWidth browser compatibility. Source: MDN Docs
InnerWidth browser compatibility. Source: MDN Docs

Alright, now that you know what window.innerHeight and window.innerWidth is! Let's move on to the second scenario.

Get viewport width without the vertical scrollbar

But sometimes, you don't want the vertical/horizontal scrolls to be included in the viewport height and width.

In that case, you should use the Element.clientWidth and Element.clientHeight on your document's html element.

You can access the root html element via document.documentElement.

And here's how to get the layout viewport width in JavaScript without the scrollbar:

 console.log('document.documentElement.clientWidth')
// output would be an integer value indicating the layout viewport width in pixels (without the vertical scrollbar) 

And for the viewport height:

 console.log('document.documentElement.clientHeight')
// output would be an integer value indicating the layout viewport width in pixels (without the horizontal scrollbar) 

If you get a ReferenceError when accessing the document, check this quick guide on fixing document is not defined error.

Here's the browser compatibility for Element.clientHeight and Element.clientWidth:

ClientWidth browser compatibility. Source: MDN Docs
ClientWidth browser compatibility. Source: MDN Docs

Alright, I think that does it. I hope you found this quick guide helpful.

Thanks for reading.

Author photo

Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @lavary_

If you read this far, you can tweet to the author to show them you care. Tweet a Thanks

In this article:

Disclaimer: This post might contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.