If you're curious about the capabilities of the display your code is executing on or if you want to change the display of your page depending on the pixel and color resolution the browser is running at then the screen object provides you with the capability to accomplish these tasks.
| Property | Value |
width |
returns the width of the user's display, in pixels |
height |
returns the height of the user's display, in pixels |
updateInterval |
sets or returns the interval between screen updates |
bufferDepth |
returns or changes the color depth of the off-screen bitmap buffer |
colorDepth |
returns the currently supported color depth for the browser |
height and width simply return the height and width of the screen. These are useful when creating new browser windows as they can be used to help decide where the new window should go. You can also use them to change the size of the existing display.
The colorDepth property tells us how many bits per pixel the browser currently has available for displaying different colors. With one bit per pixel we can display 21 = 2 different colors, with 4 bits per pixel we can display 24 = 16 different colors, and so on. Most displays today have at least 256 colors per pixel available and some may have over 16 million different colors. One immediate use for this property is in determining how many different colors to use on our page or in graphics that we might display. If a display can only handle 16 colors, and we have a 16 color and 16 million color JPEG to choose from the colorDepth property can allow us to give the high resolution image only to the person with the high resolution monitor. To do this in code we'd just need to change the URL of the <IMG> tag to point to the correct graphic.
In this case, our code would look something like this:
<SCRIPT LANGUAGE="VBScript">
If screen.colorDepth > 4 Then
document.writeln "<IMG SRC=""manycolor.jpg"">"
Else
document.writeln "<IMG SRC=""fewcolor.jpg"">"
End If
</SCRIPT>
This code block tests the value of the colorDepth property and then outputs a string to the browser that either references the manycolor.jpg file if the display is capable of more than 24 or 16 colors or the fewcolor.jpg file otherwise. The next chapter talks more about the document.write method that we're using in this example to create HTML as the page is loaded.
Using the read/write bufferDepth property, we can instruct the browser to buffer all input off-screen before display with whatever color depth we desire – it's as simple as setting screen.bufferDepth to the number of pixels you'd like. bufferDepth can handle values of 0 (the default), 1, 4, 8, 15, 16, 24, and 32, as well as -1 (indicating that buffering should always be performed at the screen depth). Yes, this means that if you've always wanted to know what your pages looked like with two colors you now have your chance! When the bufferDepth property is set to the default of 0, the browser may buffer the input, but it isn't required to do so.