JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
var width_in = screen.width / dpi_x;
var height_in = screen.height / dpi_y;
var diagonal_in = Math.round(10*Math.sqrt(width_in * width_in + height_in * height_in))/10;
document.getElementById('diagonal').innerHTML +=  diagonal_in + '"'; Math.round(10*height_in)/10;