Home arrow Tutorials arrow Get the Viewer's Screen Resolution

Web Development

Welcome to Web Development section. Please choose a category. 
 
  • Hrvatski tutorijali
    Ovdje su objavljeni razni tutorijali na hrvatskom jeziku na temu PC, programiranje, web development, savjeti, trikovi, optreba racunala itd.
  • Tips / Tricks
    Articles about various tips and tricks concerning Windows, Linux and other OS usage.
  • JavaScripts
    Code snippets, tutorials and tricks for JavaScrip language.
  • PHP & MySQL
    Tutorials, code examples, tips and tricks for PHP and MySQL development.
  • Tutorials
    Place for tutorials about using various application in best and simplest way.
Get the Viewer's Screen Resolution PDF Print E-mail
(1 vote)

Get the Viewer's Screen Resolution
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.

 
< Prev   Next >
What's your favorite Internet browser?
 

Login






Lost Password?

Tools

Coming soon...

Partners

Syndicate