Knowing the Resolution of the User's Screen

Introduction
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 code. In this article, I show you how to use JavaScript to determine the screen resolution of the client's computer screen.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. 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 copy of a web page and displays it. At the client, the JavaScript screen object can be used 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.

Screen Resolutions
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.

The JavaScript Screen Object
JavaScript has certain DOM like objects. Each of these objects represents an HTML element. An object normally has properties and methods. You can use an object with JavaScript to know or change the value and characteristics of the corresponding HTML element.

One of such JavaScript objects is the screen object. It has two properties that you use to 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 to do is to use JavaScript to read the width property value of this object and the height 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.

Chrys