|
How to get the viewer's screen width and height and use them to help the viewer.
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.
|