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):

Property	Navigator 4.0x	Internet Explorer 4.0x
screen.height	768	768
screen.width	1024	1024
screen.availHeight	740	740
screen.availWidth	1024	991
screen.availLeft	0	null
screen.availTop	0	null

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:

• The properties of the screen object normally reflect the active screen -- the one displaying more than half of the browser window. When the window is split evenly, the primary monitor is considered active.
• If you slide the window from one screen to the other one, and refresh the page, the screen object's properties change to reflect the new environment.
• There seems to be a glitch with relative monitor positions. If you have two monitors of different sizes you can specify where they sit relative to each other. Essentially, this defines the portion of the larger monitor's side (bottom or top) through which you can move the mouse over to the smaller monitor. Here are a few examples:
  • If the secondary monitor is set up to the left of the primary monitor, with it's top edge aligned with the other monitor's top edge, then you can move the mouse between them through the top 480 pixels of the left-hand side of the primary monitor. In this configuration the value of screen.height is 489, just about right (for the smaller monitor's screen).
  • If you set the display so the secondary monitor is aligned with the bottom of the primary monitor's screen, the screen.height increases. Using this method, Charles was able to increase screen.height to 1329 (almost the sum of the both heights).
  • When the second monitor on top of the primary one, screen.height is 0, while screen.availHeight is -20, probably due to the Mac's toolbar.
• Moving the primary screen around has no effect on the properties of its screen object.

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?

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

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