My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devices.
UPDATE: Here is the current code snippet that I have been working on:
var dpr = window.devicePixelRatio;
var inch = 25.4;
var pixelHeight = screen.height * dpr;
var pixelWidth = screen.width * dpr;
function calculatePpi(monitorDiagonal) {
return (Math.sqrt(Math.pow(pixelWidth, 2) + Math.pow(pixelHeight, 2))) / monitorDiagonal;
}
function mmToPx(mm) {
return (((mm / inch) * calculatePpi(monitorDiag)));
}