How to access screen display’s DPI settings via javascript?

Question

Is there a way to access the screen display's DPI settings in a Javascript function?

I am trying to position a HTML panel on the page and when the user's DPI is set to large (120), it throws the position off. I need to be able to know what the DPI is so I can adjust the position accordingly.

Answer 1

Looks like you can use the 'screen' DOM object in IE, its got properties for deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI.

https://www.w3schools.com/jsref/obj_screen.asp

Here's a solution from http://www.webdeveloper.com/forum/showthread.php?t=175278 (i havent tried it, seems like a total hack :) Just create something 1 inch wide and measure it in pixels!

console.log(document.getElementById("dpi").offsetHeight);

#dpi {
    height: 1in;
    left: -100%;
    position: absolute;
    top: -100%;
    width: 1in;
}

<div id="dpi"></div>