Broad Network


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 320480 to 20481536. 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

Related Links

Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Surrounding a Web Page Image with Text
Advantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Drawing Bar Chart in HTML Canvas
Drawing Pie Chart in HTML Canvas
HTML Canvas 2D Context
Drawing a Histogram in HTML Canvas
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library

Comments

Become the Writer's Fan
Send the Writer a Message