Viewport properties

This page replaces the former Window Manipulation page. The less interesting part of this page has been moved to the Archives.

This page gives an overview of the methods and properties of the window object that you need to read out data about the user's screen, or to move the window across the screen. This is generally only possible in Version 4 and higher browsers.

Extreme browser incompatibilities ahead. They are mainly caused by Microsoft's decision to reallocate some properties to document.documentElement if Explorer 6 goes into 'Strict Mode'.

Unfortunately Mozilla 1.6 has seen fit to follow Microsoft's lead in this respect. Some properties work only in Quirks Mode, others only in Strict Mode. Fortunately this idiocy is offset by the fact that Mozilla 1.6 also supports a few ancient Netscape 4 properties that give the correct values regardless of rendering mode.

Cross browser scripts

How to find the measurements you want cross browser.

Inner width

The inner dimensions of the window or frame.

var x,y;
if (self.innerHeight) // all except Explorer
{
	x = self.innerWidth;
	y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
	// Explorer 6 Strict Mode
{
	x = document.documentElement.clientWidth;
	y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
	x = document.body.clientWidth;
	y = document.body.clientHeight;
}

Scrolling offset

How much the page has scrolled.

var x,y;
if (self.pageYOffset) // all except Explorer
{
	x = self.pageXOffset;
	y = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
	// Explorer 6 Strict
{
	x = document.documentElement.scrollLeft;
	y = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
	x = document.body.scrollLeft;
	y = document.body.scrollTop;
}

Page height

The height of the total page (usually the body element).

This is a tricky one, some browsers require scrollHeight, others offsetHeight, but all browsers support both properties. Therefore I see which property has the larger value. This means the page height the script below gives is never smaller than the window height.


var x,y;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
	x = document.body.scrollWidth;
	y = document.body.scrollHeight;
}
else // Explorer Mac;
     //would also work in Explorer 6 Strict, Mozilla and Safari
{
	x = document.body.offsetWidth;
	y = document.body.offsetHeight;
}

Breakdown

All properties give measurements in pixels, unless otherwise noted.

See also the key to my compatibility tables.

Properties of self

Property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.0 Opera 7.50 Netscape 4
innerHeight and innerWidth
The inner dimensions of the window or frame

Test page
No No No Yes Yes Yes Yes
self.innerHeight and self.innerWidth
outerHeight and outerWidth
The outer dimensions of the entire browser window

Test page
No No No Yes Yes Yes Yes
self.outerHeight and self.outerWidth
pageXOffset and pageYOffset
The number of pixels the page has scrolled

Test page
No No No Yes Yes Yes Yes
self.pageXOffset and self.pageYOffset
screenTop and screenLeft
The coordinates of the upper left corner of the window or frame on the screen

Test page
Yes Yes No No Yes Yes No
self.screenLeft and self.screenTop
screenX and screenY
The coordinates of the upper left corner of the window on the screen

Test page
No No No Yes Yes Incorrect Yes
self.screenX and self.screenY
  • Opera gives the coordinates of the page window relative to the browser window, and not to the screen.

Properties of self.screen

Property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.0 Opera 7.50 Netscape 4
availWidth and availHeight
The available screen width and height (minus taskbars and such)

Test page
Yes Yes Yes Yes Yes Yes Yes
self.screen.availWidth and self.screen.availHeight
colorDepth
Bits per pixel.

Test page
Yes Yes Yes Yes Yes Yes Yes
self.screen.colorDepth
pixelDepth
Bits per pixel.

Test page
No No No Yes Yes Yes Yes
self.screen.pixelDepth

There doesn't seem to be any difference with colorDepth, except in browser compatibility
width and height
The resolution of the entire computer screen

Test page
Yes Yes Yes Yes Yes Yes Yes
self.screen.width and self.screen.height

Properties of document.body

See also the Get heights experiments, where you can play with the various properties of document.body and document.documentElement.
Property Explorer Windows Quirks Explorer Windows Strict Explorer 5.2 Mac Mozilla 1.6 Quirks Mozilla 1.6 Strict Safari 1.0 Opera 7.50
clientWidth and clientHeight
The inner dimensions of the window or frame

Test page
Yes offset Yes Yes offset offset Yes
document.body.clientHeight
offsetWidth and offsetHeight
The width and height of the entire page (which usually means the body element)

Test page
Almost Yes Yes Yes Yes Yes Almost
document.body.offsetHeight
  • Explorer Windows Quirks and Opera give these properties almost, but not quite, the same values as the client properties.
scrollWidth and scrollHeight
The same as offset

Test page
Yes Yes client Yes Yes Yes Almost
document.body.scrollHeight
  • Opera gives it a slightly higher width value. I'm not saying this is a bug, but it's easiest to judge it Almost so I don't have to upset my definitions.
scrollTop and scrollLeft
The number of pixels the page has scrolled

Test page
Yes No Yes Yes No Yes Yes
document.body.scrollTop

Properties of document.documentElement

Property Explorer Windows Quirks Explorer Windows Strict Explorer 5.2 Mac Mozilla 1.6 Quirks Mozilla 1.6 Strict Safari 1.0 Opera 7.50
clientWidth and clientHeight
The inner dimensions of the window or frame

Test page
No Yes No No Yes b.offset b.offset
document.documentElement.clientWidth
  • Safari and Opera equal this property to document.body.offsetWidth / Height.
offsetWidth and offsetHeight
The same as document. body.offsetHeight

Test page
Yes QM value Yes Yes Yes Yes client
document.documentElement.offsetWidth
  • Explorer Windows Strict gives it the same value as the Quirks mode document.body.offsetWidth
  • In Opera these properties give the same values as document.documentElement.clientWidth / Height.
scrollWidth and scrollHeight
Generally the same as document. documentElement.offsetHeight

Test page
Yes b.scroll No Yes Yes Yes Yes
document.documentElement.scrollWidth
  • Explorer Windows Strict gives it the same value as the Quirks mode document.body.scrollWidth
scrollTop and scrollLeft
The number of pixels the page has scrolled

Test page
No Yes No No Yes No Yes
document.documentElement.scrollTop
Property Explorer Windows Quirks Explorer Windows Strict Explorer 5.2 Mac Mozilla 1.6 Quirks Mozilla 1.6 Strict Safari 1.0 Opera 7.50

Your browser's properties

These are the properties that work in your browser:


(Refresh list)