Help

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Partners
This is a

Detecting user's screen size

JavaScript supports a 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). NS6+/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:
colorDepth:
pixelDepth:


Here's the code for the text boxes:

<script type="text/javascript">
document.t.t1.value=screen.width
document.t.t2.value=screen.height
document.t.t3.value=screen.colorDepth
document.t.t4.value=screen.pixelDepth
</script>

One very 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...)

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">
var n=navigator.appName
var v=parseInt(navigator.appVersion)
var browsok=((n=="Netscape")&&(v>=4))
var browsok2=((n=="Microsoft Internet Explorer")&&(v>=4))
if ((browsok&&screen.pixelDepth<=8)||
(browsok2&&screen.colorDepth<=8))
document.bgColor="#00FF00"
//simple lime for 8 bit screens
else
document.bgColor="#E7F8ED"
//fancy green for nice screens.
</script>

Look closely at the if statement. We first tested for browser, to see it its a forth generation browser, and than according to the browser, test for different screen property, since screen.pixelDepth in Firefox equals screen.colorDepth in IE. When will the feud ever end? Anyhow, the rest of the above code is trivial.