Detect Screen resolution and density

by Julien Roche

HTML

<script src="https://unpkg.com/[email protected]/res.js"></script>
<h1>Dppx: <span id="dppx"></span></h1>
<h1>Dpi: <span id="dpi"></span></h1>
<h1>Dpcm: <span id="dpcm"></span></h1>

Babel + JSX

// See https://github.com/ryanve/res
// See https://www.npmjs.com/package/res

let dppxElement = document.querySelector('#dppx');
let dpiElement = document.querySelector('#dpi');
let dpcmElement = document.querySelector('#dpcm');

dppxElement.innerHTML = res.dppx();
dpiElement.innerHTML = res.dpi();
dpcmElement.innerHTML = res.dpcm();