Detecting user's screen size using window.screen

JavaScript supports a window.screen object that contains basic information about the screen of your visitor. With this information, pages could be designed to custom fit the particularities of each screen. In this article, we will see just how easy it is to detect a user's screen type!

All screen information is stored in the screen object of JavaScript, a new object. They are in the form of properties:

Properties of the Screen Object

Properties	Description
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:

screen.width

Lets see what each one reveals:

Your screen's information:

width: height: availWidth availHeight colorDepth: pixelDepth:

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 screen.colorDepth, you 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:

E7F8ED

On a screen that displays 16-bit in color depth, the color looks light green, the way its intended to be displayed. On a 8-bit one, however, its completely different. Since 8 bit screens don't support the above color, it uses a substitute-a ugly, brownish color instead. Using some simple JavaScript, we can now display an alternate color as background for those poor folks:

<script type="text/javascript">

if (screen.colorDepth<=8) //if screen is 8 bit or less
 document.body.style.background="#00FF00" //simple lime background for 8 bit screens
else
 document.body.style.background="#E7F8ED" //fancy green background for modern screens.

</script>

Nothing complicated going on above.