If you have the Yahoo mail account, you might have noticed that Yahoo offers two
different web pages for the same page information. What interests us in this article is that
the two web pages have different screen resolutions. At the long run you are served the
page that suits your resolution, after the resolution of your screen has been determined by
of the client’s computer screen.
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, text), just contact me at firstname.lastname@example.org. That is, contact me for the slightest problem you have about what you are reading.
Server and Client
Your web site with its web pages, resides in a server. At the client, the browser pulls a
to determine the resolution. The code can then tell you what the resolution is or send the
result back to the server using Ajax or do both. If you do not know anything about Ajax,
know that I wrote three articles on Ajax in this blog. To get to the Ajax articles, just type
Ajax and my name, Chrys in the Search box of this page and click Search. If you have a
Google Search box on this page, use it.
The smallest dot that can be displayed on a screen is called the pixel. The resolution of
your computer screen is the number of dots that cover the display rectangular area of
your screen. The resolution is always given in terms of the width and height of this
display rectangular. Common resolutions are, 800 X 600, 1024 X 768, 1152 X 864, 1280
X 960, and 1280 X 1024. The larger the resolution, the bigger the screen and the better
the images displayed by the screen. So the higher your resolution, the better your web
page. You can now see why yahoo offers two different pages for the same information;
some users have higher resolutions and they should enjoy better presentation.
element. An object normally has properties and methods. You can use an object with
know the resolution of your screen. It has the property, width, for the width of the display
rectangle. It has the property, height, for the height of the display rectangle. All you have
property value of this object. These width and height properties return their values in
number of pixels. When you do that, you have the resolution; simply report it in whatever
format you want.
Try the following code, which would display the resolution of your screen in an alert box.
resolWidth = screen.width;
resolHeight = screen.height;
alert(‘Your screen resolution is: ‘ + resolWidth + ‘ X ‘ + resolHeight);
In the script, the first line reads the width from the screen object; the second line reads the
height; and the third line displays the result.
Alternatively, you could send to the result (width and height) to the server with Ajax.
That is it for this article.