DHTML browser dimensions

height of page? width of window? where is it scrolled to?

so many questions. so many browsers, and you may even be using different ones, depending on whether you're checking email, playing games, or paying your O2 bill online. what's a javascripter to do?

so i wrote a couple of tests in javascript to spit out the results of reading various properties like window.innerHeight, and document.documentElement.pageYOffset. stuff like that.

i ran it with a few browsers i had handy and built a big table of javascript/DHTML browser dimensions. you might want to open it in a new window and refer to it while you read the rest of this page.

explanation and methodology

the two test pages are here and here. they're the same except that one has a DOCTYPE and one doesn't... the DOCTYPE one should trigger any "standards" modes, while the DOCTYPEless one should trigger "quirks" modes.

the scripting is a little funny because i wanted to be able to query all the properties and not have the script stop on errors. IE4 doesn't support try/catch, so instead of a regular loop i use a timer and an onerror handler. it makes generating the results a little slower but it works. unfortunately, by making it work on IE4, i somehow broke it for netscape 4.x. oops. i'll have to work on that later.

the page consists of a single large image, 800px x 1200px, with display set to block, making the page exactly 800 by 1200 pixels. the text is in an absolutely positioned DIV. the image has tick marks to aid in sizing and positioning the viewport.

example of window sizing

example of scroll positioning. note the positions of the light grey lines near the top and left of the browser window

in all the test runs, i sized the window so that the viewable area was 650 pixels across by 400 pixels tall. i also tried to scroll the window to about 98px from the top and 128px from the left, using the grey lines as a guide, although this was not always possible, due to quantization of the scrollbar. so note that any differences in scroll-position type properties in the table is generally due to my inability to scroll to an exact pixel value.

the script outputs a long list of properties and values, first as property = value pairs, then as a single row of comma-delimited values, followed by a single row of comma-delimited property names. the last two are handy if you want to collect the values into a big CSV value for importing into a spreadsheet (which is what i did).

preparing the results

i took the raw data, stuck it in a spreadsheet, and formatted it a little:

• i removed the properties which resulted in "undefined" in all browsers (for example, window.clientWidth results in "undefined" in every browser i tried).
• most browsers returned the same values for the two documents (with and without DOCTYPE), so i only show the one set of values
• i exported from microsoft excel to a web page, and then deleted a bunch of the microsoft-specific garbage that it puts in there

observations

• i tested a lot of gecko-based browsers. oddly i only had one version of netscape installed, on my mac. i wasn't expecting firefox's differing results between quirks and standards modes. you can see what version of the gecko engine is being used by looking at the user agent: (1) there's a date following the word "gecko" (e.g. "Gecko/20030312"); (2) most gecko-based browsers have a revision number denoted by "rv: #" (e.g. "rv:1.3").
• only safari returned values for properties on the document object. for example document.offsetHeight etc.
• window.innerHeight seems to include the scroll bar in its value (or some kind of chrome), not just the visible vertical pixels of the page. safari is an exception

conclusions

none yet, really... more to come.

want to help me out?

i don't have access to safari 1.1 or higher. i also don't have a linux machine on hand to try any browsers on that platform. i would like to try konqueror as well as others...

if you want to send me test results, then please follow the same procedure as i did:

1. resize the window so that the visible area of the page is exactly 650 pixels by 400 pixels
2. scroll the window so that the light grey lines are one pixel away from the top and left edges of the viewable area (this may not always be possible)
3. then hit the "test" link and wait for the javascript dialog to say it's done
4. copy the contents of the text area and

last updated 2004-03-31

copyright © 2004 wayne a. lee