1. Technology

The Browser Object Model

10. Viewport Size

By

Now that we have looked at those BOM objects which to some degree are supported by all the major browsers it is time to move on to some of the useful information provided by the Browser Object Model that is not as standardised in how the browsers provide it.

Probably the most useful information that you can obtain from the browser is the size of the viewport. This is the area that the browser makes available in which to display your web page and is the size that you need to be concerned with in determining how your page will appear.

A lot of people make the mistake of retrieving the screen size and assuming that it will reflect the space that their page will display in but the relationship between screen size and browser viewport area is a tenuous one since with some operating systems the browser itself can at its biggest be the size of the screen less fixed toolbars and the browser itself will have toolbars etc. that make the viewport even smaller. Other operating systems support multiple virtual screens and the browser can easily span across several of these allowing it to be opened much larger than the size of a single screen.

There are three different ways that browsers provide access to the size of the viewport. One of these is used by all of the common browsers except for Internet Explorer and that is to provide the information on the viewport width and height in window.innerWidth and window.innerHeight. How Internet Explorer provides the information depends on which doctyle your page uses. A strict doctype means that the values get loaded into document.documentElement.clientWidth and document.documentElement.clientHeight while not having a strict doctype loads the values into document.body.clientWidth and document.body.clientHeight instead.

The simplest way to retrieve the width and height of the viewport is to create functions that will return the values and then use feature sensing within the function to see which of the three contains a non-zero value as that will be the one that the current browser has used. For example our functions might look like this:


function vpWidth() {
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
function vpHeight() {
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

With those functions in place you can then just use vpWidth() and vpHeight() in your code where ever you need to know the viewport width and height respectively and have the appropriate value retrieved from where ever the current browser actually stores it.

All that remains then is to consider when you should use this to find out the size of the viewport. The answer to that is that the most common situation where you need the size of the viewport is when you are creating JavaScript animations where you want to have something moving around on the page without it disappearing out of the visible section of the page. Knowing the viewport size should not be something that you need to know in determining the appearance of your page. As you will want your page to still be laid out properly even when JavaScript is not available you should define its appearance completely in the CSS where you can use percentages to automatically resize your content based on the viewport area without needing any JavaScript at all.

More of this Tutorial

  1. About.com
  2. Technology
  3. JavaScript

©2014 About.com. All rights reserved.