What is the viewport?

One of the most fundamental concepts of development in the web is that of the viewport.

It's a term used quite frequently in design and coding articles; in HTML, CSS, JavaScript; and many other places - simply because it identifes an extremely useful idea!

So what actually is meant by viewport?

The whole region where the contents of a webpage are visible is called the viewport.

To infer it right from the name, a viewport is a region where we can view the webpage.

Consider the illustration below of a web browser as viewed in a desktop screen. The blue area is what we call the viewport.

IMAGEIMAGEIMAGEIMAGE

Notice how the viewport excludes the taskbar of the operating system and the menubar of the browser.

This is perfectly logical - the content of a webpage isn't shown ever on the browser's menubar or the operating system's taskbar; likewise they both don't constitute the viewport.

Different devices have different viewport sizes. Some devices, such as mobile phones, can even show multiple viewport sizes at a time by changing their orientation.

Whatever the case be, just remember the following rule of thumb:

Whichever area encompasses the contents of the webpage, is the viewport.

Below shown is an illustration of the viewport on a couple of devices.

Viewport on a couple of devices

So now that we know what is meant by the term viewport, it's time to see how to use JavaScript to get its dimensions, and then consequently use these to power certain features.

Viewport's dimensions

A viewport's dimensions, i.e its width and height, tell a lot about the way things can be laid out on the webpage.

They're the core of responsive designing - where the CSS engine queries the width and height of the viewport and likewise executes style rules that are binded with one specific width or height.

For example, if a device has a 320px viewport width - typical for a phone - it can't display 5 floating elements at 20% width one next to another - at least without a compromised and extremely cluttered look!

Similarly, a desktop device at a width of, let's say, 1366px can easily do this, since it has a larger visible area to accomodate stuff.

Now this is some viewport theory in relation to CSS.

However, sometimes certain features powered by JavaScript also rely on the dimensions of the viewport.

For instance, if one wants to show a pop-up on a desktop device only, then he'll first check for the corresponding viewport width using some JavaScript and then execute the function to show the pop-up.

But how to get the width, or height, of the viewport in JavaScript?

The following section shall answer that for you!

To get the width of the viewport in pixels, use the global innerWidth property. It's a number that indicates the width of the viewport, inclusive of any rendered scrollbar.

Similarly, to get the height, use the innerHeight property. It's also a number and once again, inclusive of any rendered scrollbar.

To see a visualisation of innerWidth and outerWidth look at the image shown below.

Following we utilise both these properties to print out your device's viewport's dimensions right to you:

<button onclick="getViewportDimensions();">Get Viewport Dimensions</button>
function getViewportDimensions() {
    alert(window.innerWidth + ' x ' + window.innerHeight);
}

As soon as you click the button, the getViewportDimensions() handler takes over and alerts the values of innerWidth and innerHeight.

Here we've used a conventional way of stating the dimensions of the viewport: width x height.

Now moving on, owing to the fact that for the same webpage and the same device the viewport can be altered, we can use the onresize handler to monitor for these changes and likewise retrieve new viewport dimensions.

Following is a demonstration of this:

window.onresize = function() {
    // log the new viewport width and height
    // each time the viewport is resized
    console.log(window.innerWidth, window.innerHeight);
}

As you resize the viewport, the resize event gets dispatched and consequently the onresize handler is called, which writes out both the new innerWidth and innerHeight properties.

Live Example

In the link given above, we display innerWidth and innerHeight inside two <span> elements, instead of logging them, so that mobile users can also visualise the idea!

Outer dimensions

Apart from innerWidth and innerHeight, JavaScript provides two other properties that sound quite similar, but serve a different purpose. They are outerWidth and outerHeight.

outerWidth returns the width of the browser window whereas outerHeight returns the height of the browser window.

See the emphasis given to the word 'browser window' above.

Unlike innerWidth and innerHeight, these properties don't target the viewport, but rather the whole browser window including its menu bar.

Consider the illustration below:

Difference between innerWidth, innerHeight, outerWidth and outerHeight

But remember that these aren't fairly common in usage out there, because in most cases developers are only concerned with the viewport.

Who would want to care for menu bars anyway?

Nonetheless it's still better to know something useless than knowing nothing!