如何在CSS中模擬現實世界的尺寸？

Question

我想建立一個網站，無論顯示器或智能手機的分辨率如何，都以該寬度顯示例如100mm的對象。

因此，我要求用戶提供他的顯示尺寸以計算正確的ppi 。 但是，它並不適用於所有設備。

編輯：這是我到目前為止的代碼：

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)));
}

Answer 1

使用CSS高度和寬度。

高度和寬度可以設置為自動（這是默認設置。這意味着瀏覽器會計算高度和寬度），也可以使用長度值（例如px，cm等）或包含塊的百分比（％）進行指定。

因此，例如，如果您想顯示35cm寬和50cm高的元素，則可以使用CSS進行設置：

#example {
  height: 50cm;
  width: 35cm;
}

祝好運！

---

看來，盡管這應該可行，但不夠准確。 看評論。