Search this site!
Return to the CSB Support home page
How can I determine the screen resolution a visitor is using?

Problem:   Visitors may view your web site with their monitor set at different screen resolutions.  The two most common ones are 800x600 and 1024x768.  You may want to create specific, unique pages in your web site tailored to display properly in different screen resolutions.

To do this, you need to determine which screen resolution your visitor is using, and you can then automatically direct them to the appropriate page.

The following example comes from a PC Magazine article.
Solution:   

Step 1:
Let's verify that we can determine the browser resolution you (the visitor) are using.
See if your screen resolution is properly displayed:

And here is the code I used to do it:

<script>
<!--
document.write("screen width=" + screen.width + "<br>");
document.write("screen height=" + screen.height + "<br>");
document.write("available screen width=" + screen.availwidth + "<br>");
document.write("available screen height=" + screen.availheight + "<br>");
//-->
</script>


Step 2:
Now let's see what code we need to have our web site automatically go to a specific page based on the visitor's screen resolution. The code listed is NOT exactly what was posted in the PCMag article, as I found corrected some coding logic errors:

<script>
<!--
if (screen.width<=640)
    location.href="size640.htm";
else if (screen.width<=800)
        location.href="size800.htm";
else if (screen.width<=1024)
        location.href="size1024.htm";
else location.href="size1280.htm";
//-->
</script>

Step 3:
Let's see if it really works!

Click here to go to page based on your current screen resolution