CSS的逻辑长度与现实的物理长度

已知

在现行的CSS版本中，in、cm、px是逻辑绝对长度单位，独立于显示设备，三者的转换关系是1in=2.54cm=96px。1in在显示设备（后文称显示器）上呈现多长，由操作系统的分辨率配置与显示设备的规格共同决定。

举个例子，以下HTML呈现一个黑色方块，那么方块呈现的物理宽度会是多少呢？

<div style="width:1in; height:1in; background-color: #000000;"></div>

（设显示器采用方形像素，DPI为124；操作系统的分辨率同显示器的；浏览器DPI设置为96，缩放100%；元素未应用zoom，transform等影响显示尺寸的属性）

答案是：96/124(约等于0.7742)国际英尺

注：CSS中的in、cm、px等逻辑绝对长度单位是W3C定义的，与ISO规定的inch、centimeter、显示器的像素点距没有强制1:1的转换关系。

问题

那么问题来了，假如想用CSS装饰一个元素，使其宽高为A4大小(21cm*29.7cm)，且带些阴影，以让看起来是真实的A4纸。

要实现这效果关键就在于至少得知道三个量：浏览器的DPI值(Internet Explorer可通过

screen.deviceXDPI

获取)，操作系统针对当前显示器所使用的分辨率，以及显示器的画面显示区域的对角线尺寸。

以个人的配置为例，

显示器对角线尺寸：23.75inch

显示器分辨率：2560*1440, 60pHz

当前逻辑分辨率：2560*1440

方案

要呈现出真实A4规格大小的元素，首先得计算出物理英寸与逻辑英寸的比率（即以下变量scaleToPhysical），

JS

var getDPI=function(x, y, d){
return Math.sqrt(x*x+y*y)/d;
};
var browserDPI=96;
var physicalDPI=getDPI(2560, 1440, 23.75);
var scaleToPhysical=physicalDPI/browserDPI; //1.2882498070656716

CSS

.a4{
width: calc(21cm * 1.2882498070656716);
height: calc(29.7cm * 1.2882498070656716);
box-shadow: 1px 2px 3px #A0A0A0;
background-color: #ffffff;
}

HTML

<div class="a4"></div>

完整示例见 JSFiddle: CSS A4 Paper

DIY步骤：

1. 调整上述JS中的getDPI的水平分辨率、垂直分辨率、显示画面对角线英寸数三个参数，算出实际的scaleToPhysical

2. 用scaleToPhysical的值替换上述CSS中的缩放比率值

3. 运行代码，用一张A4纸去比拟屏幕中的画面，或用直尺测量结果页中”A4纸”的尺寸

失望

网页中物理尺寸的模拟算是解决了，但很多应用程序根本没考虑到逻辑绝对单位与物理绝对单位的接轨。Photoshop貌似就没有，我想预览一个打印大小为A2规格(42cm*59.4cm)的PSD文档的实际尺寸，说是显示了实际尺寸，当实际显示的尺寸并不理想。

应用程序要实现逻辑长度-物理长度接轨，需要用户提供显示器的一些规格信息，并提供/确认操作系统的分辨率设置和缩放设置，这还不够，如果显示画面没有填满显示器，情况又变复杂了，需要用户自己测量显示画面的对角线尺寸并告知应用程序以作计算参考。可能大家对这方面的需求甚少，所以没人去做，想要这功能，只听到很多人解释，却找不到人去实践，因此只能DIY了。