|
Adjusting web pages to a given screen resolution
You might be familiar with the following
scenario: a given page in your application looks very
good at a resolution of 800 x 600 pixels but looks awkward
at a resolution of 1280 x 1024 pixels. Or, possibly the
other way around: your layout looks great at a resolution
of 1024 x 768 pixels but completely cramped with a resolution
of 800 x 600 pixels.
If your design is such that you can no longer
accomodate different resolutions with the same page, you are left with
only one choice, and that is to offer the same content
with several pages that are optimized for different screen
resolutions. The easiest way to do so is to use JavaScript
to query the user's screen resolutions and to serve the
appropriate web page for the given configuration.
You need to insert the following script
at the very top of the <body> tag:
<script language = "Javascript">
if (screen.width >=
1280)
window.location.ref = "index1280.html"
else if (screen.width >=
1024)
windows.location.ref = "index1024.html"
else
windows.location.ref = "indexstd.html";
</script>
If the width of the screen (screen.width)
is larger than 1280 pixels, then the browser will load
the file index1280.html. Should the screen
width be greater than or equal to 1024 pixels (but
less than 1280) then the user gets to see the file index1024.html.
For smaller resolutions the script will tell the browser
to open the standard page called indexstd.html.
For the very rare
case that the user has JavaScript deactivated you
need to make sure that after the script above, you include
one of the following: i) either an information for the
users informing them to turn on JavaScript or ii) the
HTML code for a very simple version of your page.
previous tip | next tip
|
