JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<pixel></pixel>

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

CSS

pixel{
  height:1px;
  width: 1px;
  background: red;
  transform: scale(1000);
  display: block;
}

JavaScript

console.log($('pixel').height() / 1000);
console.log($('pixel').width() / 1000);

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

console.log(vw / 100);
console.log(vh / 100);


dpi_x = document.getElementById('testdiv').offsetWidth;
dpi_y = document.getElementById('testdiv').offsetHeight;