如何为各类显示设备校准长度单位？

核心原理 #

网页默认CSS长度单位（如cm、mm）依赖浏览器预设的96PPI像素密度，但不同设备真实PPI（每英寸像素数）差异极大，导致标尺显示不准或过小。通过设备物理尺寸+分辨率计算真实PPI，再以此调整标尺缩放比例，就能让标尺匹配真实物理长度。

具体操作步骤 #

1. 计算设备真实PPI #

• 获取关键参数：
  • 设备屏幕物理对角线尺寸（参数标注多为英寸，需转厘米：1英寸=2.54cm）
  • 屏幕分辨率（如1920×1080，即宽/高的像素数）
• 计算逻辑：
  用勾股定理推导，假设对角线为D英寸，分辨率宽W像素、高H像素：
  • 对角线像素数 = √(W² + H²)
  • 真实PPI = 对角线像素数 / D

2. 确定标尺缩放比例 #

浏览器默认1cm对应约37.8像素（96/2.54），而真实设备1cm对应 PPI/2.54 像素。因此缩放比例 = 真实PPI / 96。
比如设备真实PPI为192，缩放比例就是2，标尺需放大2倍才能匹配真实长度。

3. 代码修改实现校准 #

方法1：手动固定缩放（适配单一设备）

在.ruler类中添加缩放样式，同时调整容器宽度避免内容截断：

div.ruler {
  counter-reset: major -1;
  width: 10cm;
  white-space: nowrap;
  font-size: 0;
  transform: scale(2); /* 替换为你的真实缩放比例 */
  transform-origin: left top; /* 从左上角缩放，避免偏移 */
  width: calc(10cm * 2); /* 对应缩放比例调整宽度 */
}

方法2：自动计算+手动 fallback（适配多设备）

添加JS自动尝试获取屏幕信息，失败则让用户手动输入PPI：

<script>
let realPPI;
// 尝试自动获取屏幕物理尺寸（部分浏览器/设备支持）
try {
  const diagonalInches = window.screen.diagonalInches;
  const diagonalPx = Math.sqrt(window.screen.width ** 2 + window.screen.height ** 2);
  realPPI = diagonalPx / diagonalInches;
} catch (e) {
  // 自动获取失败，手动输入模式
  realPPI = prompt("请输入设备真实PPI（如MacBook Pro为227，iPhone为326）：", 96);
}

// 应用缩放
const scaleRatio = realPPI / 96;
const ruler = document.querySelector('.ruler');
ruler.style.transform = `scale(${scaleRatio})`;
ruler.style.transformOrigin = 'left top';
ruler.style.width = `calc(10cm * ${scaleRatio})`;
</script>

完整可运行代码示例

<html>
    <head>
        <title>Screen Geometry and Gestures</title>
        <style>
        div {
          margin: 0;
          padding: 0;
        }
        div.ruler {
          counter-reset: major -1;
          width: 10cm;
          white-space: nowrap;
          font-size: 0;
          transform-origin: left top;
        }
        div.number::after {
            content: counter(major);
          counter-increment: major;
          font-size: 3mm;
        }
        div.major {
          width: calc(1cm - 1px);
          height: 5mm;
          text-align: left;
          border-left: 1px solid black;
          display: inline-block;
          font-size: 0;
        }
        div.minor {
          width: calc(1mm - 1px);
          height: 1mm;
          border-right: 1px solid black;
          display: inline-block;
        }
        div.half {
          height: 2mm;
        }
        </style>
    </head>
    <body>
        <main>
            <h1>Screen Geometry and Gestures</h1>
            <section>
                <h2>Length Units</h2>
                <p>Let's make a ruler!</p>
                <div class="ruler">
                    <div class="major">
                        <div class="number"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor half"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor"></div>               
                    </div>
                    <script type="text/javascript">
                        const self = document.currentScript;
                        const div = self.previousElementSibling;
                        for(let i = 0; i < 20; i++) {
                          const newdiv = div.cloneNode(true);
                          self.parentElement.insertBefore(newdiv, self);
                        }
                    </script>
                    <div class="major"></div>
                </div>
            </section>          
        </main>
        <script>
        // 标尺校准逻辑
        let realPPI;
        try {
            const diagonalInches = window.screen.diagonalInches;
            const diagonalPx = Math.sqrt(window.screen.width ** 2 + window.screen.height ** 2);
            realPPI = diagonalPx / diagonalInches;
        } catch (e) {
            realPPI = prompt("请输入设备真实PPI（如MacBook Pro为227，iPhone为326）：", 96);
        }
        const scaleRatio = realPPI / 96;
        const ruler = document.querySelector('.ruler');
        ruler.style.transform = `scale(${scaleRatio})`;
        ruler.style.width = `calc(10cm * ${scaleRatio})`;
        </script>
    </body>
</html>

注意事项 #

• 部分移动设备或浏览器出于隐私/兼容性限制，无法获取精确物理尺寸，手动输入PPI是更可靠的方案。
• 缩放后必须同步调整标尺容器宽度，避免内容截断或换行。
• 可额外添加手动微调按钮，让用户用真实物理尺子对比后进一步校准精度。

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