JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ruler"></div>

CSS

.ruler {
  width: 10cm;
  height: 1cm;
  background: red;
  margin: 1cm auto 0 auto;
}

JavaScript

console.clear();
var el = document.querySelectorAll('.ruler');
var cm = el[0].offsetWidth / 10; // 1 cm in px
var inch = cm * 2.54; // 1 inch in px
var scrW = screen.width / inch; // scr width
var scrH = screen.height / inch; // scr height
var scrD = Math.sqrt(Math.pow(scrW, 2)
           + Math.pow(scrH, 2)); // scr diagonal
var roundScrD = Math.round(scrD * 10) / 10; // round diagonal
alert(
  'SCREEN INFO\n\n' +
  '1 cm: ' + cm + 'px\n' +
  '1 inch: ' + inch + 'px (Dpi)\n' +
  'resolution: ' + screen.width + 'x' + screen.height + 'px\n' +
  'screen size: ' + roundScrD + 'inch'
)