DHTML browser dimensions
height of page? width of window? where is it scrolled to?
document.documentElement.pageYOffset. stuff like that.
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:
- i removed the properties which resulted in "undefined" in all browsers (for example,
window.clientWidthresults 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
- 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
documentobject. for example
window.innerHeightseems 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
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:
- resize the window so that the visible area of the page is exactly 650 pixels by 400 pixels
- 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)
- copy the contents of the text area and
last updated 2004-03-31
copyright © 2004 wayne a. lee