使用方法
- 找一张标准银行卡或身份证（ISO/IEC 7810 ID-1，长边正好 85.60 毫米），把它平贴在屏幕上，紧贴着上面的「校准参照条」。
- 改第二个输入框「它在屏幕上占多少 CSS 像素」，默认 324。反复加减这个数，直到参照条宽度和卡片严丝合缝。刻度、统计和下面的像素换算表会同步变化。
- 第一个输入框确认参照物长度是 85.60 毫米（10～600 之间都可以）。换成 A4 短边 210 毫米之类也可以，右侧四个单选按钮是常用实物的快捷值。
- 选刻度单位：毫米适合量小零件，厘米适合量版面，英寸适合对照进口显示器参数。默认毫米，刻度间距 3.78505 px。
- 读结果：这个在线屏幕标尺给出五张卡——校准比例、与 CSS 基准的偏差、1 像素合多少毫米、一屏可见范围与刻度总数；点「复制读数」带走这段文字。
这个在线屏幕标尺能解决什么问题
一是手边没有尺子又要知道大概尺寸。快递来的小零件、要配的螺丝孔距、临时想知道某张照片大致几厘米——校准一次之后，把东西贴到屏幕上对着刻度读数即可，精度取决于你校准得有多认真。
二是给设计稿和网页做「肉眼校验」。设计稿写 16 毫米的边距，屏幕上到底多长？在校准过的屏幕上直接量，比在脑子里换算像素密度可靠得多。对照表里那些常见实物尺寸，也方便你判断某个尺寸「大概像一枚一元硬币」还是「差不多一张名片」。
三是解释「为什么同样 100 px 在我的屏幕上比别人的窄」。CSS 只规定 1 英寸等于 96 像素，但屏幕的物理密度、系统缩放、浏览器缩放三者都会改变一个 CSS 像素实际有多长。本工具把这个差异量化成一个百分比，让你看见究竟差了多少。
本页不做：不检测屏幕分辨率或面板参数（那是「屏幕分辨率测试」做的事）；不按显示器尺寸反推像素密度与最佳观看距离（看「屏幕尺寸计算器」与「PPI计算器」）；也不读取显示器 EDID 或调用摄像头，浏览器没有给出这类接口。
校准原理：96 px/英寸这条基准线，以及它为什么不够用
基准来自 CSS 规范。W3C《CSS Values and Units Module Level 4》第 5.2 节规定了一组绝对长度：1 英寸固定等于 96 个 CSS 像素，于是 1 毫米 = 96 ÷ 25.4 = 3.77953 px，1 厘米 = 96 ÷ 2.54 = 37.79528 px。注意这是规定值而非实测值：浏览器写 width:100mm 时画出的就是 377.95 个 CSS 像素，与实际一百毫米的物理长度无关。
为什么一定要校准。「CSS 像素」和「物理毫米」之间隔着三层：面板的物理像素密度、操作系统的缩放比例、浏览器的页面缩放。同一张 85.60 毫米的卡，在普通笔记本上占 323 CSS 像素（比例 3.77336 px/mm），在高分屏配 125% 系统缩放时只占 268（比例 3.13084，比基准低 17.16%），在外接 2K 显示器上占 402（比例 4.69626，比基准高 24.26%）。差别之大，不校准根本不能用。
不校准会错多少。用上面那台 125% 缩放的机器举例：页面按基准画 100 毫米是 377.95 个 CSS 像素，而在这台机器上这段像素实际代表 120.72 毫米，等于多算了 20.72 毫米，误差超过 20%。换成正确的比例 3.13084 之后，同一 100 毫米对应 313.08 像素，读数才回到 100.00 毫米。
为什么不用 devicePixelRatio。它只回答「1 个 CSS 像素由几个物理像素渲染」，不回答「这些物理像素有多长」。更麻烦的是，它会被系统缩放改变，而且浏览器通常只给出 1、1.25、1.5、2、3 这类离散值。把它当成 96 倍的估算密度（96 → 120 → 144 → 192 PPI）只是粗算，替代不了一次真实比对。
参照物为什么选卡片。ISO/IEC 7810 的 ID-1 尺寸（85.60 × 53.98 毫米）是明文写进国际标准的一片塑料，人人兜里都有、几乎无制造公差、且尺寸不随使用磨损。A4 纸的 297 × 210 毫米来自 ISO 216（面积 1/16 平方米、长宽比 √2），同样可靠，适合校准更大的范围。
输入怎么变成刻度。两个原始值相除得到比例 k = 像素数 ÷ 参照物毫米数（默认 324 ÷ 85.60 = 3.78505 px/mm）；再倒数得到「一个 CSS 像素合多少毫米」（默认 0.26420 毫米，即 264.2 微米）。刻度线由 CSS 的 repeating-linear-gradient 绘制，background-size 直接设成 k 个像素，于是每一条细线的间距就是 1 毫米；数字标签按 10 毫米一个绝对定位摆放。整套流程没有用到 Canvas，也没有任何第三方库。
完整示例（数值仅作演示）
示例条件与页面默认态一致：参照物 85.60 毫米、占 324 个 CSS 像素、单位毫米。逐项核对：
- 校准比例 = 324 ÷ 85.60 = 3.78505 px/mm；
- 与 CSS 基准 3.77953 相差 0.146%——这点误差来自把 323.53 四舍五入成整数 324；
- 1 个 CSS 像素 = 85.60 ÷ 324 = 0.26420 毫米 = 264.2 微米；
- 刻度间距 3.78505 px，100 毫米消耗 378.50 个 CSS 像素（未校准时是 377.95）；
- 容器宽 700 像素时一屏可见 184.9 毫米；换成 320 像素的窄屏只剩 84.5 毫米；
- 把这些乘回去验证：银联卡长边 85.60 毫米对应 324.00 像素，一元硬币 25.00 毫米对应 94.63 像素——与下面对照表逐行一致。
常见参照物尺寸与像素换算对照表
「折合 CSS 像素」一列按默认比例 3.78505 px/mm 算。这张表有两个用途：给校准提供已知长度的实物，以及在校准完成后反过来核对读数。
| 参照物 | 真实尺寸 | 折合 CSS 像素 | 依据 |
|---|---|---|---|
| 银行卡 / 身份证长边 | 85.60 mm | 324.00 px | ISO/IEC 7810 ID-1 明文规定 |
| 银行卡 / 身份证短边 | 53.98 mm | 204.32 px | 同上，圆角不改变总长宽 |
| A4 纸长边 | 297.00 mm | 1124.16 px | ISO 216，面积 1/16 m²、长宽比 √2 |
| A4 纸短边 | 210.00 mm | 794.86 px | 297 ÷ √2 = 210.011，标准取整 210 |
| A5 纸长边 | 210.00 mm | 794.86 px | A5 是 A4 对折 |
| A5 纸短边 | 148.00 mm | 560.19 px | 210 ÷ √2 = 148.49，标准取整 148 |
| 名片长边 | 90.00 mm | 340.65 px | 国内主流成品尺寸 90 × 54 |
| 名片短边 | 54.00 mm | 204.39 px | 同上 |
| 键盘相邻字母键中心距 | 19.05 mm | 72.11 px | 3/4 英寸 × 25.4 = 19.05 |
| 一元硬币直径 | 25.00 mm | 94.63 px | 第五套人民币 1 元币标准直径 |
| 五角硬币直径 | 20.50 mm | 77.59 px | 第五套人民币 5 角币标准直径 |
| 一角硬币直径 | 19.00 mm | 71.92 px | 第五套人民币 1 角币标准直径 |
| 3.5 mm 耳机插孔外径 | 3.50 mm | 13.25 px | 插孔名义直径 |
| 乐高 2×4 砖长边 | 31.80 mm | 120.36 px | 单元数 × 8.0 − 0.2 |
| 乐高 2×4 砖短边 | 15.80 mm | 59.80 px | 同上 |
| 乐高相邻凸起间距 | 8.00 mm | 30.28 px | 基本模数 8.0 mm |
| SD 卡长边 | 32.00 mm | 121.12 px | SD 物理规格 32.0 × 24.0 × 2.1 |
| SD 卡短边 | 24.00 mm | 90.84 px | 同上 |
| CD 光盘外径 | 120.00 mm | 454.21 px | IEC 60908 规定 120 mm |
| CD 中心孔直径 | 15.00 mm | 56.78 px | IEC 60908 规定 15 mm |
| 5 号电池直径 | 14.50 mm | 54.88 px | IEC 60086 AA 型最大直径 |
| 5 号电池长度 | 50.50 mm | 191.14 px | IEC 60086 AA 型最大长度 |
| 7 号电池直径 | 10.50 mm | 39.74 px | IEC 60086 AAA 型最大直径 |
| 7 号电池长度 | 44.50 mm | 168.43 px | IEC 60086 AAA 型最大长度 |
输入范围、边界与精度说明
- 参照物长度限 10～600 毫米（步长 0.01）。太小的参照物会让比例失去意义——10 毫米只覆盖几十个像素，±1 像素的比对误差就能带来百分之几的偏差。想更准就用更长的实物：A4 的 297 毫米比银行卡的 85.60 毫米更能压制误差。
- 屏幕像素数限 1～5000（步长 1 的整数）。填小数会被拒绝：屏幕渲染在 CSS 像素层面上是有最小粒度的，小数像素也无法画出更细的刻度，只会带来无意义的精度假象。
- 比例 k 限制在 0.5～40 px/mm。在线屏幕标尺对这条区间的判断是硬性拒绝：超出这个区间几乎一定是填反了（把 324 个像素当成 324 毫米）或参照物选错。此时页面会明确报错，而不是画一条荒谬的刻度。
- 校准只对当前状态有效。换显示器、改系统缩放、用浏览器 Ctrl + 滚轮缩放，都会让上一次的比例失效——缩放会改变 CSS 像素与物理长度之间的关系。这三件事发生之后请重新比对一次。
- 可见长度取决于容器宽度。按默认比例，700 像素宽的容器能显示 184.9 毫米，320 像素的窄屏只有 84.5 毫米。量更长的东西请横向滚动标尺，标尺本身设计成可横滚的独立容器，不会撑破页面。
- 刻度的最小可读间距。比例低于约 2 px/mm 时 1 毫米刻度已经挤成一团，此时切到厘米单位（刻度间距 37.85 px）读数更清楚；英寸单位下间距是 96.14 px（25.4 × 3.78505）。
- 精度上限由你自己的比对决定。人眼比对宽度的分辨率大约在 1 个 CSS 像素量级，按默认比例换算是 0.26 毫米左右。想要更高精度请瞄准多个毫米刻度交叉核对，或直接改用实测工具。
常见问题
在线屏幕标尺为什么是 3.78505 而不是规范里的 3.77953？
3.77953 是纯粹的数学值（96 ÷ 25.4），而页面默认填的是 324 个整数像素除以 85.60 毫米，得到 3.78505。两者只差 0.146%，差的那点来自把 323.53 取整成 324。这正是本工具要求你自己比对的理由：真实值只能来自真实比对。
没有银行卡，用别的东西可以吗？
可以，任何尺寸已知且足够长的东西都行。更稳的做法是用更长的参照物：A4 纸的 297 毫米把比对误差摊薄到原来的三分之一左右。页面右侧四个单选按钮覆盖了 85.60、210、19.05、25 四个常用值。
调了浏览器缩放之后要重来吗？
要。浏览器缩放改变的是 CSS 像素与物理长度的对应关系，原来的比例立即失效。系统缩放比例变化、把窗口拖到另一台显示器上，同理都要重新比对一次。
手机上也能量吗？
能，但一屏可见长度受限。按默认比例，320 像素宽的屏幕只显示 84.5 毫米。量更长的时候横向拖动标尺即可；另外手机屏幕通常视角色彩偏移明显，建议正视而不是斜看。
devicePixelRatio 不能代替校准吗？
不能。它只说 1 个 CSS 像素由几个物理像素渲染，没有给出物理长度。它还会被系统缩放改写，并被浏览器规整成有限的离散值；用它乘 96 得到的 PPI 只是粗估。
量出来总觉得差一点点，是 bug 吗？
多半是比对误差或多个毫米刻度上的视差叠加。把 1 像素的量级记住：默认比例下 1 个 CSS 像素就是 0.26420 毫米，差两三个像素属于正常比对抖动。需要更准请换更长的参照物。
CSV 导出那一列为什么和我屏幕上的不一样？
「折合 CSS 像素」这一列是用页面默认比例 3.78505 算的固定值，方便对照。你在自己设备上校准出别的比例之后，实际像素数是「真实尺寸 × 你的 k」，两者不同是正常的。
输入的内容会被上传吗？
不会。比例、刻度、像素换算全部是当前页面上的算术，不读取 EDID、不调用摄像头、不发起任何网络请求，也不写本地存储。可以在开发者工具的 Network 面板里多点几次「重绘标尺」确认。