如何在CSS中模拟真实物理尺寸？跨设备实现固定毫米宽度显示

我明白你想实现的效果——让网页里的元素（比如100mm宽的容器）在任何设备上都以真实物理宽度呈现，这个想法在打印预览、精准设计还原这类场景里特别实用。

你现在通过请求用户输入显示器对角线尺寸来计算PPI的思路是合理的，但确实存在不少局限性：

• 移动端设备几乎不会让用户手动输入屏幕尺寸，而且就算想自动获取，也不是所有浏览器都提供准确的物理尺寸API；
• 用户输入的尺寸大概率不准确——毕竟没多少人能精准记住自己显示器的对角线长度；
• window.devicePixelRatio在部分老旧设备或定制化浏览器里，返回值可能和实际像素密度有偏差。

先看你目前的代码，逻辑框架没问题，但有个小细节需要修正：

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

注意mmToPx函数里的monitorDiag是未定义的变量，应该改成和calculatePpi一致的参数传递方式，修正后如下：

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, monitorDiagonal) { 
    return ((mm / inch) * calculatePpi(monitorDiagonal)); 
}

另外，也可以尝试结合CSS单位做补充，但要注意兼容性：

• 原生的cm/mm单位大多是基于浏览器默认96PPI换算的，不会对应真实物理尺寸；
• 部分现代浏览器支持device-cm/device-mm这类物理尺寸单位，但目前兼容性极差，不适合生产环境使用；
• 移动端可以尝试通过window.screen的相关属性间接推导物理尺寸，但同样存在设备适配不全的问题。

总的来说，让用户输入显示器尺寸计算PPI是当前相对可靠的方案，但要做好输入验证、参数传递的细节处理，同时得提前告知用户这个方案的局限性——比如移动端体验不佳、部分设备无法获取准确像素数据等。

内容的提问来源于stack exchange，提问作者Codan