PageResource.com - Web Development Tutorials

Screen Resolution Detection

Using screen.width and screen.height

Newer browsers allow you to detect the user's screen resolution using the screen.width and screen.height properties. This can be a helpful way to send viewers to the right version of your page, depending on their computer's screen resolution.

The properties hold the values of the pixel length of the width and height of the viewer's screen. For example, you could send the viewer an alert when a link is clicked that gives the screen resolution:

<A HREF="javascript:alert
('Your resolution is '+screen.width+'x'+screen.height);">
Click for your screen resolution</A>

To see this in action, try the link below:
Click for your screen resolution

This can be useful if you have a page designed for a screen resolution that is higher than some viewers may have available. For instance, if you had a design that would be viewed most comfortably at a resolution of 1024x768 or better you could set up an if-else statement to send the viewer to the high resolution page if their screen can handle it. If not, you can send them to a low resolution version of the page:

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
 window.location="highres.html";
}
else
{
  window.location="lowres.html";
}
//-->
</SCRIPT>

As you can see, this could help you give your visitors a design that is best for their screen resolution and can allow you to create larger designs without having to leave some of your visitors with horizontal scrollbars.

Well, that does it for now, see you when I write the next section!

previous
Previous
By: John Pollock

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy