How to get the width and height of the viewport with vanilla JS

Yesterday, we looked at the Element.getBoundingClientRect() method, and how you can use it to get details about an element’s position in the viewport.

Today, let’s look at how to get the height and width of the viewport itself. This one is short-and-sweet.

You can use the window.innerHeight property to get the viewport height, and the window.innerWidth to get its width.

let viewportHeight = window.innerHeight;
let viewportWidth = window.innerWidth;

Here’s a demo.