jQuery Plugin For Displaying Viewport Information - stage

stage is a simple jQuery plugin for detecting and displaying information about the browser's viewport such as size, diagonal length, pixel per inch, dots per pixel, orientation etc.

How to use it:

1. Include jQuery library and jQuery stage on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.stage.js" type="text/javascript"></script>

2. Load application

<script src="app.js" type="text/javascript"></script>
<link href="app.css" rel="stylesheet" type="text/css"/>

3. Application markup

<table class="info">
<tr>
<td class="label">w:</td>
<td class="value w"></td>
</tr>
<tr>
<td class="label">h:</td>
<td class="value h"></td>
</tr>
<tr>
<td class="label">dp:</td>
<td class="value dp"></td>
</tr>
<tr>
<td class="label">dppx:</td>
<td class="value dppx"></td>
</tr>
<tr>
<td class="label">ppi:</td>
<td class="value ppi"></td>
</tr>
<tr>
<td class="label">di:</td>
<td class="value di"></td>
</tr>
<tr>
<td class="label">size:</td>
<td class="value size"></td>
</tr>
<tr>
<td class="label">orientation:</td>
<td class="value orientation"></td>
</tr>
</table>

4. Settings

$.stage.settings({
ppi: {
"100": "dp > 1024 && dppx <= 1.0", /*  large screens with low device pixel ratio   */
"130": "*",/*  the reasonable average value*/
"160": "dp < 1024 && dppx >= 2.0"  /*  small screens with high device pixel ratio  */
},
size: {
"phone":   " 0.0 <= di && di <  6.5",  /*  phone   devices usually have a diagonal of up to  6.5in   */
"tablet":  " 6.5 <= di && di < 12.0",  /*  tablet  devices usually have a diagonal of up to 12.0in   */
"desktop": "*" /*  desktop devices usually have a diagonal of 12.0in and higher  */
},
orientation: {
"portrait":  "h > w * 1.2",/*  portrait  means height is 20% higher than width   */
"square":"*",  /*  everything else is nearly square  */
"landscape": "w > h * 1.2" /*  landscape means width  is 20% higher than height  */
}
});

Change log:

v1.1.12 (2018-05-12)

• updates to the latest version

v1.1.5 (2014-09-13)

• updates to the latest version

v1.1.1 (2013-11-23)

• updates to the latest version

This awesome jQuery plugin is developed by rse. For more Advanced Usages, please check the demo page or visit the official website.