MATCHING SCREEN RESOLUTION

20. August 2001, 19:12 | by WD Milner | Full Article |

As one explores the World Wide Web one can’t help but notice the corporate and organizational sites that change layout based on the screen resolution used to view them. The best approach is to use Cascading Style Sheets and relative positioning to place elements in position regardless of the display size. However, this can sometimes be difficult when using fixed size elements such as graphics.

An alternative method is to use some scripting to detect the screen height and width and then create different versions of the pages for different resolutions. The downside of course is the extra work involved in maintaining seperate versions of a site.

The following javascript will display the screen resolution and available page space (minus browser frame, toolbars, menus, etc.):

<script>
<!--//
document.write("Screen width = " + screen.width + "<br>");
document.write("Screen height = " + screen.height + "<br>");
document.write("Page width = " + screen.availablewidth + "<br>");
document.write("Page height = " + screen.availableheight + "<br>");
//-->
</script>

The screen object documentation is available from both Microsoft and Netscape.

Once the screen parameters are detected, little more code is needed to redirect a visitor to the appropriate web page:

<script>
<!--//
if (screen.width <= 640) top.location.href="index640.html";
if (screen.width <= 800) top.location.href="index800.html";
if (screen.width <= 1024) top.location.href="index1024.html";
top.location.href="index1280.html";
//-->
</script>

When using this technique, pages should be tested at various resolutions to ensure the desired appearance. Not all visitors use their browsers maximized, especially at higher screen resolutions, so it can be difficult to cover all possibilities. Javascript must also be supported/enabled in the browser for this approach to work.

- 30 -

Categories: ,
Keywords: screen resolution,javascript,web site

Comments


 



Textile help
 
* Indicates a required field.

As a SPAM prevention measure, comments are moderated and will be posted once vetted.

 

Article & Comments


Comments are not enabled for all articles or documents.

Article Navigation
|

Categories

Business
Communications
Electronics
Entertainment
Environment
Government
Internet and WWW
Miscellany
Music and Audio
News
Photography
Privacy
Psychology
Security
Society and Culture
Stage and Screen
Technology
Theology
Tips and Tricks
Web Design
Web Site


The Birches - Milner.ca Support Child Safety Online

 

 
 
 Help to FIGHT spam!
 • 
  •
•••