Detecting user's screen size using
|availHeight||Specifies the height of the screen, in pixels, minus interface features such as the taskbar in Windows.|
|availWidth||Specifies the width of the screen, in pixels, minus interface features such as the taskbar in Windows.|
|colorDepth||The bit depth of the color palette available for displaying images in bits per pixel.|
|height||The total height of the screen, in pixels.|
|pixelDepth||Display screen color resolution (bits per pixel). Firefox exclusive property.|
|width||The total width of the screen, in pixels.|
Each property is accessed just like any other, first the name of the object, than the property it self:
Lets see what each one reveals:
One important thing to realize is that in IE
screen.colorDepth represents the same thing as the
screen.pixelDepth property in
Firefox- they both display
the pixel per bit number of a screen (8 bit, 16 bit...) For all practical
purposes, since both browsers support
can just use that property.
The last property (pixel Depth), which displays the number of bits per pixel, is NOT supported by IE, thus the "null" appearance in the last form box if you are using IE. This property displays additional information about the depth of the color palette.
So what's all this information good for, apart from looking cool? Well, I can think of many right now that may involve the width and height property to dynamically adjust the layout of a page, but lets go for a less obvious one-screen.pixelDepth
Many pages now on the net use custom defined colors for their background. That's fine, but what they may have not realized is that the color they used may actually look different, or less appealing, than it looked on their high resolution, fancy monitor. Lets take the following color as an example:
if (screen.colorDepth<=8) //if screen is 8 bit or less
document.body.style.background="#00FF00" //simple lime background for 8 bit screens
document.body.style.background="#E7F8ED" //fancy green background for modern screens.
Nothing complicated going on above.