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, device orientation, and much more.

How to use it:

1. Include jQuery library and the jQuery stage plugin on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.stage.js"></script>

2. The JavaScript to output the device & viewport information.

$(document).ready(function () {
  var showStage = function (stage, stageOld) {
    $.each(stage, function (name, value) {
      $(".info .value." + name).html(value);
    });
  };
  showStage($.stage(), null);
  $(window).stage(function (ev, stage, stageOld) {
    showStage(stage, stageOld);
  });
});

3. The device & viewport information should look as follows:

/* stage width (px)  */
"w": 0, 

/* stage height (px)  */
"h": 0, 

/* stage diagonal length (px)  */
"dp": 0, 

/* stage dots per pixel  (factor) */
"dppx": 1.0, 

/* stage pixel per inch  (factor) */
"ppi":  0.0, 

/* stage diagonal length (inch) */
"di": 0.0, 

 /* stage size  (string) */
"size": "", 

/* stage orientation  (string) */
"orientation": "" 

4. Default settings.

$.stage.settings({

  ppi: {

    /* large screens with low device pixel ratio */
    "100": "dp > 1024 && dppx <= 1.0",

    /* the reasonable average value  */
    "130": "*",

    /* small screens with high device pixel ratio */           
    "160": "dp < 1024 && dppx >= 2.0"

  },

  size: {

    /* phone devices usually have a diagonal of up to  6.5in  */
    "phone": "0.0 <= di && di <  6.5",

    /*  tablet devices usually have a diagonal of up to 12.0in */
    "tablet": "6.5 <= di && di < 12.0",

    /*  desktop devices usually have a diagonal of 12.0in and higher */
    "desktop": "*"  

  },

  orientation: {

    /* portrait  means height is 20% higher than width */
    "portrait":  "h > w * 1.2",

    /* everything else is nearly square */  
    "square":    "*",

    /* landscape means width  is 20% higher than height */
    "landscape": "w > h * 1.2"

  }
  
});

Changelog:

v1.1.15 (2021-01-10)

• updates to the latest version

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.