Knowing the Resolutions of Visitor Screens with ECMAScript

Foreword: In this article, I explain how to determine the resolutions of your users' screens.

By: Chrysanthus Date Published: 25 Jan 2016

Introduction

Mobile traffic now accounts for more than half of total Internet traffic. Screen resolutions of users are now more varied than ever before (for mobile and desktop screens). Screen resolutions now range from 320×480 to 2048×1536. So, you have to know the screen resolutions of your web visitors, in order to tailor the web design to suit most of your visitors or your important visitors. When a resolution is quoted, the number of pixels at the top edge of the screen is written before the number of pixels on the right edge of the screen (forming a matrix of dots).

Note: Browsers of basic mobile phones do not understand ECMAScript (JavaScript). So, this method would not work with basic mobile phones.

CSSOM screen Object
CSS Object Model (CSSOM) has an object called the screen object. This used to be a DOM object, and still is, for backward compatibility. The object has two properties that you can 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 ECMAScript to read the width property value of the object and the height property value of the 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.

Read and try the following code, which would display the resolution of your screen in an alert box:

<!DOCTYPE HTML>
<html>
<head>
    <title>Sample</title>
</head>
<body>

    <script type="text/ecmascript">
        resolWidth = screen.width;
        resolHeight = screen.height;
        alert('Your screen resolution is: ' + resolWidth + 'x' + resolHeight);
    </script>

</body>
</html>

Keeping Statistics of the Resolutions
You have to place code similar to the above in the web pages of your site. However, do not include the alert box line. You need Ajax to send the resolution data to the server. At the server, you need a script like Perl (language) to send the data to a database like MySQL. You need an interface like the PurePerl MySQL API to interface the database at the server. The links to learn all these are given below.

Chrys

Broad Network

Related Articles

Knowing the Resolutions of Visitor Screens with ECMAScript

Introduction

Related Links

Comments