JSFiddle - React, Tailwind, and code Playground

by bilelz

HTML

<div id="screen">
  
</div>

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>

<div id="is4k" hidden>
4k?
</div>

<div id="not4k" hidden>
not 4k?
</div>

CSS

body{
  font-size: 16px;
}

@media screen and (min-resolution: 144dpi) {
  body{
      font-size: 50%;
    }    
    #is4k{
      display: block !important;
    }
}

@media screen and (max-resolution: 121dpi){ 
    body{
      font-size: 100%;
    }

    #not4k{
      display: block !important;
    }
}

JavaScript

let devicePixelRatio = window.devicePixelRatio
let screenInfo = screen;
document.querySelector("#screen").innerHTML = 
`window.devicePixelRatio:  ${devicePixelRatio} <br/>
width: ${screen.width} <br/>
height: ${screen.height} <br/>
pixelDepth : ${screen.pixelDepth}<br/>
`

devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
  
  document.querySelector("#screen").innerHTML += `dpi_x: ${dpi_x} <br/>
  dpi_y: ${dpi_y}`