
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.
- Publication date: 12.05.2018
- Source