身边没尺子但要量个小尺寸（票根 / 卡片 / 名片 / 螺丝直径）的场景非常普遍。物理尺通常只有一把还经常找不到，而手机相机里测距应用又依赖摄像头扫描——屏幕直尺最大的优势是 设备本身就是尺子，掏出来贴上去就能读数。这篇讲清三种校准方法的精度差异、适用场景，以及外接显示器、显示缩放等特殊情况的处理。
为什么必须校准
浏览器只知道：
- CSS 像素数（width: 100px）
- devicePixelRatio（设备像素 vs CSS 像素的比）
浏览器不知道：
- 屏幕物理尺寸（多少英寸 / 厘米）
- PPI（Pixels Per Inch，每英寸像素数）
- 物理像素的实际大小所以”画一个 100 CSS px 宽的方块”在不同设备上物理尺寸不同：
| 设备 | PPI | 100 CSS px 物理宽度 |
|---|---|---|
| iPhone 13 | 460 | 5.3 mm |
| iPad Air | 264 | 9.2 mm |
| MacBook Air M2 | 224 | 10.8 mm |
| 24” 1080P 显示器 | 92 | 26.4 mm |
| 27” 4K 显示器 | 163 | 14.9 mm |
任何在线尺子都必须先建立 px-per-mm 比例关系 才能显示准确刻度——这就是”校准”。
三种校准方法
方法 1：DPI 计算（理论法）
知道屏幕的 PPI 和 devicePixelRatio，可以理论计算 px-per-mm：
PPI = 屏幕对角像素数 / 屏幕对角英寸数
1 英寸 = 25.4 mm
px-per-mm = PPI / 25.4例：iPhone 13 标称 460 PPI：
px-per-mm = 460 / 25.4 = 18.11 设备像素 / mm
（每 18 个设备像素 = 1 毫米）CSS 像素层面（devicePixelRatio = 3）：
CSS px-per-mm = 18.11 / 3 = 6.04
（每 6 个 CSS 像素 = 1 毫米）优点：理论上最准确（厂商精确标称值） 缺点：需要知道 PPI（多数用户不知道）；浏览器缩放、显示缩放都会破坏假设
方法 2：机型库（自动法）
工具内置常见机型 PPI 数据库——选机型后自动按 PPI 反算 px-per-mm。
| 收录范围 | 数据来源 |
|---|---|
| iPhone 全系 | 苹果官方页面 |
| iPad 全系 | 苹果官方页面 |
| MacBook 全系 | 苹果官方页面 |
| 主流安卓旗舰（三星、华为、小米） | 厂商规格页 |
| Surface 系列 | 微软官方 |
| 主流笔记本（戴尔、惠普、联想） | 部分覆盖 |
精度：1-2% 误差（厂商标称的精度）。
适用：
- ✅ 用主屏（笔记本自带屏 / 手机屏 / 平板屏）
- ✅ 系统显示缩放保持”默认”
- ✅ 浏览器缩放保持 100%
不适用：
- ❌ 外接显示器（库里没有专门型号数据）
- ❌ macOS 显示缩放（“看起来像 1680×1050”）
- ❌ Windows 显示缩放 ≠ 100%
方法 3：银行卡校准（手动法）
拖动屏幕上的滑块对齐物理银行卡的宽度（85.60 mm）——任何 ID-1 / CR80 卡都符合此尺寸。
算法：
校准滑块对齐物理 85.60 mm 长度
读取滑块对应的 CSS 像素数 N
px-per-mm = N / 85.60
保存到 localStorage精度：±0.5 mm（人眼对齐极限）。
适用：
- ✅ 任何设备
- ✅ 外接显示器
- ✅ 系统显示缩放 / 浏览器缩放都能用（校准时是什么状态后续保持）
- ✅ 不在机型库的设备
通用 CR80 卡列表（手边一定有一张）：
| 卡 | 是否 CR80 |
|---|---|
| 银行卡 / 信用卡 | ✅ 全球 ISO 标准 |
| 中国二代身份证 | ✅ |
| 港澳台居民来往内地通行证 | ✅ |
| 学生证 / 工卡 | ✅（多数） |
| 健身卡 / 会员卡 | ✅（多数） |
| 国际驾照 | ✅ |
| SIM 卡 | ❌ 更小 |
| 名片 | ❌ 自由尺寸 |
| 礼品卡 | ❌（部分异形） |
三种方法精度对比
| 方法 | 精度 | 操作时间 | 适用 |
|---|---|---|---|
| DPI 计算 | 1-2% | 需查 PPI | 理论上最准但实操慢 |
| 机型库 | 1-2% | < 5 秒 | 主屏 + 默认缩放 |
| 银行卡 | ±0.5 mm | 30 秒 | 任何场景 |
实测精度对比（量已知 100mm 物体）：
| 校准 | 实测 |
|---|---|
| iPhone 14 + 机型库 | 99.5-100.3 mm |
| iPhone 14 + 银行卡 | 99.7-100.5 mm |
| MacBook Pro M1 + 机型库（默认缩放） | 99.4-100.4 mm |
| MacBook Pro M1 + 机型库（“更多空间”模式） | 92-95 mm（偏 5-8%） |
| MacBook Pro M1 + 银行卡 | 99.5-100.5 mm |
| 24” 1080P 外接 + 银行卡 | 99.0-100.5 mm |
结论：银行卡是最稳的兜底，机型库在标准场景下更快。
特殊场景处理
macOS 显示缩放
系统设置 → 显示器 → “更多空间” / “看起来像 X”会让机型库失效：
"默认" 模式 → 1.0× 缩放 → 机型库准
"更多空间" → ~1.1× 实际缩放 → 机型库偏 8-10%
"更大文字" → ~0.9× 实际缩放 → 机型库偏反方向解决方法（任选）：
- 切回”默认”显示模式再用机型库
- 改用银行卡校准（推荐）
- 不调系统、用银行卡校准
Windows 显示缩放
设置 → 系统 → 显示 → “缩放与布局”通常默认 125% 或 150%（高 DPI 屏）：
100% → 机型库准
125% → 机型库偏 25%（刻度全大）
150% → 机型库偏 50%解决方法：
- 临时把缩放调成 100% 再校准（设置 → 显示 → 缩放与布局 → 100%）
- 改用银行卡校准（推荐）
外接显示器
机型库通常没有外接显示器型号数据：
笔记本主屏 → 机型库可用
外接显示器 → 必须用银行卡切换屏幕后重新校准一次——校准值是按当前显示设置存的，跨屏不通用。
浏览器缩放（Ctrl+/Ctrl-）
校准前先 Ctrl+0 重置 100%。校准后改缩放，刻度会跟着失真——必须重校。
隐身模式
隐身模式 localStorage 关页面就清——每次开新隐身窗口都要重校。
使用要点
1. 校准前的准备
[ ] 浏览器缩放 = 100%（Ctrl+0）
[ ] 系统显示缩放 = 默认 / 100%（macOS / Windows）
[ ] 选好校准方法（机型库优先，银行卡兜底）
[ ] 准备好物理参照（已知机型 / CR80 卡）2. 校准操作
机型库：
- 点未校准提示条
- 选择设备型号（型号可在系统”关于本机”看）
- 校准完成
银行卡：
- 点未校准提示条
- 屏幕显示一个滑块和”标尺”图形
- 把物理银行卡贴在屏幕上
- 拖动滑块让屏幕标尺长度等于银行卡宽度（85.60 mm）
- 点确认
3. 测量
- 横竖切换适合不同长度物体
- 拖动游标标记一段距离，松手即显示 cm + inch
- 量横向长物体用横屏，量长方形物件可竖屏
4. 重新校准
换以下任一情况后必须重校：
- 换设备
- 换浏览器（Chrome ↔ Safari）
- 切换显示器（外接 ↔ 笔记本屏）
- 改变浏览器缩放
- 清缓存 / 隐身模式
适用场景
✅ 适合屏幕尺子
| 场景 | 物体范围 | 期望精度 |
|---|---|---|
| 量手机 / 手表表盘 | < 10cm | ±0.5mm |
| 量名片 / 票根 / 卡片 | 5-10cm | ±0.5mm |
| 量小印章 / 标签 | < 5cm | ±0.3mm |
| 量 USB 接口 / 数据线宽 | < 3cm | ±0.3mm |
| 量螺丝直径 | 3-10mm | ±0.3mm（勉强够） |
| 教学演示 | 任意 | 演示级 |
| 比对照片打印尺寸 | < 30cm | ±1mm |
❌ 不适合屏幕尺子
| 场景 | 原因 | 替代 |
|---|---|---|
| 量房间 / 家具 | 超过屏幕物理尺寸 | 卷尺 / 激光测距 |
| 精密机加工件 | 公差 < 0.1mm | 游标卡尺 / 千分尺 |
| 衣物量体 | 软体物难贴屏 | 软卷尺 |
| 室外户外 | 屏幕反光看不清 | 物理直尺 |
| 跨纸张测量 | 一次量不完 | 物理直尺 |
实战清单
✅ 要做：
- 校准前重置浏览器缩放 100%
- 主屏用机型库、外接显示器和缩放设备用银行卡
- 重要测量重复 3 次取均值
- 量小物件用手机 / 平板，量大物件用笔记本 / 显示器
- 校准完后保持系统设置不变
❌ 避免：
- 显示缩放 ≠ 默认时还用机型库（偏差大）
- 跨屏不重校（外接显示器和主屏校准不通用）
- 在弯曲屏幕上量直线物体（视差大）
- 用屏幕尺量 < 1mm 公差的精密件（精度不够）
- 隐身模式校了一次就习惯（关页面就清）
一句话总结
屏幕尺子精度在 ±0.5-1mm 区间——日常票根 / 卡片 / 印章足够，精密机加工请用游标卡尺；机型库省事但限主屏 + 默认缩放，银行卡校准是兜底神器，任何设备任何场景都能用。