Get DPI from javascript (live at: https://jsfiddle.net/bsorrentino/s8c51jvt/)

getDPI.js

//
// inspired by https://stackoverflow.com/a/838755/521197
//
function getDPI() {
    var div = document.createElement( "div");
    div.style.height = "1in";
    div.style.width = "1in";
    div.style.top = "-100%";
    div.style.left = "-100%";
    div.style.position = "absolute";

    document.body.appendChild(div);

    var result =  div.offsetHeight;

    document.body.removeChild( div );

    return result;

}

Hey, I had the same idea! Thanks for writing it out. :)

False, unfortunately. Browsers rely on the convention of 96 pixels per inch, but there's a lot of strange juice that goes into what actually gets rendered on-screen. For example, on my MacBook Pro right now if I set a div's css to 1in I get a 96px-wide box, but if I measure it with a ruler it's 3/4". In fact, a 128px-wide div is what gets me a 1-inch width on my screen.

devicePixelRatio is supposed to help, but with a value of 2 I don't see how. If you find a way to account for this I'd love to hear it.

That does not give anything close to DPI (Dot per inch.)
Try this on a 96Inches or more... See how's that gonna work out.

var CurrentDpiRatio         = 76;  // || 96
// YOU CAN ALSO ASK THE USER TO TELL YOU HOW BIG IS ITS SCREEN... 
// OR HAVE A RULER CANVAS AND AGAIN ASK THE USER TO TELL YOU WHAT SIZE DOES HE SEE IT AND SO ON...
// AND THERE IS ABSOLUTELY NOTHING THAT TELLS YOU THE SIZE OF THE SCREEN.
// THE USER MAY SET DIFFERENT RESOLUTION AND SCALE (NOT TO MENTION THE BROWSER SCALE) 
// BUT NO MENTION OF PHYSICAL SIZE ANYWHERE.
// THANK YOU NUTGINEERS

function GetScreenDpi(){
  // YOU MUST MULTIPLY  "devicePixelRatio" BY WHAT YOU GUESS IS OR SHOULD BE AN INCH...
 // SO IF IT GIVES YOU A RATIO OF 2 (ALIAS RETINA DISPLAY WHICH COULD BE ON A 15INCHS OR 96INCHS) 
 // SO. 96 * 2 = 192 PIXEL PER INCH... OR 76 * 2 = 152 PIXEL PER INCH MAYBE, PERHAPS, SUPPOSEDLY, ETC...
 //  YOU'RE NOT ALLOWED TO KNOW THIS. IT'S A SAFETY RISK AND SO ON. 

  return ((window.devicePixelRatio * CurrentDpiRatio));  
}
function ConvertInchesToPx(ThisInches){
  let ThisSreenDpi  = GetScreenDpi();
  let ThisReqSize   = ThisInches * ThisSreenDpi;
  return (ThisReqSize);
}
let ThisWidth       = ConvertInchesToPx(3.0);

// AND THAT'S THE CLOSEST THING I COULD GET.

Hi @DCWizard thanks for contribution I'll add your snippet to gist

Hi @DCWizard thanks for contribution I'll add your snippet to gist

Thanks,
If you indulge me a little bit further.
It does not make sense to me to have only A DPI.
That doesn't make sense in a first place.
You have a width and a height. Not all screen have the same shape and proportions.
So, you should have a X DPI and a Y DPI.
One monitor I have is 1280x1024 on a 13x11in. Everything look weird on that monitor.
i.e. Movie/Video especially.

Strange that on printers and scanners (the good one) have all that info.
I should know. I made some of those.
As for 3D printers you also need a Z DPI.
Otherwise, you cannot phantom to produce anything worthy of the real world.

I think, I have just give my whole input on this now.
Let me know if I missed anything.