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.

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:



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
also, if it doesn't seem to be running, let me know that too.

last updated 2004-03-31

copyright © 2004 wayne a. lee