-
-
Save bsorrentino/cf3f8a439ef688d2f869e1c00aaeecf9 to your computer and use it in GitHub Desktop.
// | |
// 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; | |
} |
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.
Hey, I had the same idea! Thanks for writing it out. :)