Here is an example of how you can use CSS to provide all the Device Metrics for you and even be able to react using pure CSS in most cases. You can also use javaScript or jQuery top obtain the metrics to help increase performace.
A Pen by Andrew Donelson on CodePen.
| <html lang=en> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> | |
| <![endif]--> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta name="apple-touch-fullscreen" content="yes"> | |
| <meta name="HandheldFriendly" content="true"/> | |
| <meta name="MobileOptimized" content="320"/> | |
| <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <div class="list-group jumbotron"> | |
| <div class="list-group-item"> | |
| <h5 class="list-group-item-heading">Device Width</h5> | |
| <p class="list-group-item-text">Number of pixels horizontally in <span class="badge cdo"></span> orientation.</p> | |
| <span class=" mdw badge"> </span> | |
| <br style="clear:both" /> | |
| </div> | |
| <div class="list-group-item"> | |
| <h5 class="list-group-item-heading">Dots Per Inch <small>(dpi)</small></h5> | |
| <p class="list-group-item-text">This is how many pixels (dots) your device has in one inch.</p> | |
| <span class=" dpi badge"> </span> | |
| <br style="clear:both" /> | |
| </div> | |
| <div class="list-group-item"> | |
| <h5 class="list-group-item-heading">Dots Per Pixel <small>(dppx)</small></h5> | |
| <p class="list-group-item-text">This is how many dots are in each pixel for this device.</p> | |
| <span class=" dppx badge"> </span> | |
| <br style="clear:both" /> | |
| </div> | |
| <div class="list-group-item"> | |
| <h5 class="list-group-item-heading">Device Orientation</small></h5> | |
| <p class="list-group-item-text">This is how many dots are in each pixel for this device.</p> | |
| <span class="cdo badge"> </span> | |
| <br style="clear:both" /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tail"> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| </div> | |
| </body> | |
| </html> |
| @media screen and (orientation:portrait) { | |
| .cdo:before {content:'portrait'} | |
| .hidden-portrait{display:none;visibility:hidden} | |
| .visible-portrait{display:block;visibility:visible} | |
| } | |
| /* Landscape */ | |
| @media screen and (orientation:landscape) { | |
| .cdo:before {content:'landscape'} | |
| .hidden-landscape{display:none;visibility:hidden} | |
| .visible-landscape{display:block;visibility:visible} | |
| } | |
| @media screen and (max-device-width: 2048px) {.mdw:before {content:'2048px'}} | |
| @media screen and (max-device-width: 1920px) {.mdw:before {content:'1920px'}} | |
| @media screen and (max-device-width: 1920px) and (max-device-height: 1080px) {.mdw:before {content:'HD'}} | |
| @media screen and (max-device-width: 1536px) {.mdw:before {content:'1536px'}} | |
| @media screen and (max-device-width: 1440px) {.mdw:before {content:'1440px'}} | |
| @media screen and (max-device-width: 1366px) {.mdw:before {content:'1366px'}} | |
| @media screen and (max-device-width: 1280px) {.mdw:before {content:'1280px'}} | |
| @media screen and (max-device-width: 1136px) {.mdw:before {content:'1136px'}} | |
| @media screen and (max-device-width: 1025px) {.mdw:before {content:'1025px'}} | |
| @media screen and (max-device-width: 960px) {.mdw:before {content:'960px'}} | |
| @media screen and (max-device-width: 768px) {.mdw:before {content:'768px'}} | |
| @media screen and (max-device-width: 720px) {.mdw:before {content:'720px'}} | |
| @media screen and (max-device-width: 640px) {.mdw:before {content:'640px'}} | |
| @media screen and (max-device-width: 470px) {.mdw:before {content:'470px'}} | |
| @media only screen and (-webkit-min-device-pixel-ratio:1){.dppx1{}.dppx:before{content:'1'}.dpi:before{content:'96'}.dpiScale{zoom:1.0}} | |
| @media only screen and (-webkit-min-device-pixel-ratio:1.3){.dppx13{}.dppx:before{content:'1.3'}.dpi:before{content:'124'}.dpiScale{zoom:0.75}} | |
| @media only screen and (-webkit-min-device-pixel-ratio:1.5){.dppx15{}.dppx:before{content:'1.5'}.dpi:before{content:'144'}.dpiScale{zoom:0.66}} | |
| @media only screen and (-webkit-min-device-pixel-ratio:2){.dppx2{}.dppx:before{content:'2'}.dpi:before{content:'192'}.dpiScale{zoom:0.50}.isMobile{content:'1';}} | |
| @media only screen and (-webkit-min-device-pixel-ratio:3){.dppx3{}.dppx:before{content:'3'}.dpi:before{content:'288'}.dpiScale{zoom:0.33}.isMobile{content:'1';}} | |
| @media only screen and (-webkit-min-device-pixel-ratio:4){.dppx4{}.dppx:before{content:'4'}.dppi:before{content:'384'}.dpiScale{zoom:0.25}.isMobile{content:'1';}} |