Screen Properties: Screen Dimensions - Doc JavaScript | WebReference

Screen Properties: Screen Dimensions - Doc JavaScript


Screen Dimensions

The screen object features several properties that deal with the screen's dimensions. The most obvious ones are height and width. The following script segment prints the height and width of the screen:

document.write(screen.height, "<BR>", screen.width);

If you're running Windows 95, for example, you probably know that not all portions of the screen are really active. For example, the Windows 95 Taskbar, which is usually located at the bottom of the screen, slightly reduces the screen's height. Another classic example of an inactive screen portion is the Office Shortcut Toolbar. The availHeight and availWidth properties reflect the height and width of the active portion of the screen, respectively.

Internet Explorer 4.0x correctly takes all permanent and semipermanent user interface features (displayed by the operating system) into account. But Navigator 4.0x doesn't always account for such elements. We evaluated these properties on a Windows 95 system, displaying an Office Shortcut Toolbar. Both browsers subtracted the height of the Taskbar, but only Internet Explorer 4.0x actually substracted the width of the Shortcut Toolbar.

Another difference between Navigator 4.0x and Internet Explorer 4.0x is that only Navigator supports the availLeft and availTop properties. They specify the x and y coordinates of the upper left corner of the screen's active portion. The following table lists the properties of the screen object, along with the corresponding values (the ones we got with a Taskbar and a Shortcut Toolbar):

PropertyNavigator 4.0xInternet Explorer 4.0x
screen.height768768
screen.width10241024
screen.availHeight740740
screen.availWidth1024991
screen.availLeft0null
screen.availTop0null

Notice that availLeft and availTop hold a null value on Explorer, while Navigator reflects the actual coordinates. When a null value is used in a numerical expression, it is automatically converted to 0. We'll use the built-in parseInt() function to convert availLeft and availTop into integers:

var avLeft = parseInt(screen.availLeft);
var avTop = parseInt(screen.availTop);

In this example, the avLeft and avTop variables are both 0 on Internet Explorer 4.0x. If future versions of Explorer support the availLeft and availTop properties of the screen object, the same statements will still function.

A day after we posted this column, Charles Jaimet, Head of Production at Netminder Internet Communications, discovered a potential problem -- systems with multiple monitors. Since we didn't have access to such a configuration, he helped us out by doing some research. His Power Mac 8100/110 was set up by default to display a 640x480 resolution on the secondary monitor and 1152x870 on the primary one, with both monitors set to display 16.7 million colors. Here's what he discovered:

In short, it appears that Navigator 4.0x appears to measure the screen's height and width from the upper left-hand corner of the primary monitor to the lower right-hand corner of the active monitor (the one in which the bulk of the browser window is located). Negative values that result get converted to zeroes except for the -20 pixels in height. Internet Explorer 4.0x returns the expected 640x480 information for the secondary monitor no matter where it is placed. In general, we believe you shouldn't worry too much about multiple monitor configurations. Since they are rare, there's no sense in trying to overcome this issue. After all, do any of us still test our pages in Navigator 1.x?

http://www.internet.com


Created: April 7, 1998
Revised: April 8, 1998

URL: http://www.webreference.com/js/column17/dimensions.html