Knowing the Resolution of the User’s Screen

Google+ Pinterest LinkedIn Tumblr +

With JavaScript

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, text), 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.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

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

Share.

About Author

Leave A Reply