在线尺子 - 屏幕真实刻度尺毫米厘米在线测量

手边没有尺子又要量个小东西——耳机塞、螺丝直径、邮票尺寸——把物体直接贴到屏幕上比对是最快的办法。问题是每块屏幕的像素密度都不一样，默认刻度往往不准；本工具用一张随身携带的银行卡做参照物，拖一下滑块完成校准，刻度立刻变成可信的真实尺寸。

校准的逻辑很简单：银行卡短边长 85.6 毫米是全球统一规格，调整标定值直到屏幕上的 85.6 毫米刻度段与卡片完全对齐，之后所有刻度都是真实的。量完一个还可以直接输入像素长度（比如截图里量到的长度）做换算，毫米、厘米、英寸三个口径同时给出，缝纫、3D 打印、海淘比价都够用。

这个工具解决你的问题了吗？

使用步骤

拿一张银行卡贴住屏幕上的校准段。
拖动「标定」值，让刻度与卡片边缘对齐。
把要量的物体贴着尺子，拖动红色测量线读数。
或在下方输入像素长度，直接换算三单位结果。

计算原理与示例

为什么需要校准

屏幕刻度的物理长度取决于像素密度（PPI），同一张页面在手机和显示器上的毫米长度完全不同；校准就是测出「你的屏幕上 1 毫米等于几个像素」，之后所有读数都以这个换算为准。

没有银行卡怎么校准

多数公交卡、信用卡、身份证（宽 85.6 毫米）都是 ISO 7810 ID-1 规格，任选一张都能校准；实在没有实体卡，也可以用另一个屏幕显示本工具的 85.6 毫米参照段来对齐。

能测多长的东西

刻度尺默认渲染 20 厘米量程，足够量耳机、钥匙、邮票这类小物；更长的物体可以分段测量再相加，或者直接用像素长度输入框换算，不受渲染宽度限制。

换屏幕后要重新校准吗

要。换了显示器、调整了系统缩放比例或浏览器缩放后，像素密度都变了，旧标定值全部失真，重新拖一次校准滑块即可，十几秒的事。

代码示例

JavaScript 屏幕毫米换算（先校准再量）

// 浏览器只给 CSS 像素：1in 恒等于 96px，但真实屏幕的 1in 是「多少 CSS 像素」取决于设备
// 所以必须先用银行卡（ISO 标准宽 85.6mm）之类已知宽度的实物校准出 px/mm
const PX_PER_MM_DEFAULT = 96 / 25.4;          // ≈ 3.7795，未校准时按 CSS 规范假设

function calibrate(knownMm, measuredPx) {
  return measuredPx / knownMm;                // 用户把实物拖到与刻度对齐后得出
}

function drawTicks(canvas, pxPerMm) {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let mm = 0; mm * pxPerMm <= canvas.width; mm++) {
    const x = mm * pxPerMm;
    const len = mm % 10 === 0 ? 18 : (mm % 5 === 0 ? 11 : 6);   // 主刻度 / 半刻度 / 次刻度
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, len);
    ctx.stroke();
  }
}

CSS 不跑 JS 的近似尺子（CSS 单位）

/* CSS 的 mm / in 是按「96 CSS 像素 = 1 英寸」折算的，只在系统 DPI 设置正确时才准 */
.ruler {
  height: 40px;
  background-image: repeating-linear-gradient(
    to right,
    #333 0 1px, transparent 1px 1mm      /* 每毫米一道次刻度 */
  );
}
.ruler .tick-10 {
  background-image: repeating-linear-gradient(
    to right,
    #111 0 2px, transparent 2px 10mm     /* 每厘米一道主刻度 */
  );
}

常见问题

在线尺子量得准吗？

校准之后精度取决于屏幕像素密度与你的对齐仔细程度，普通屏幕误差在半毫米内；量贵重物品的关键尺寸请以实物尺为准，本工具适合快速估算。

银行卡校准是什么原理？

ISO 7810 规定的卡片短边 85.6 毫米是全球统一物理尺寸，把它贴到屏幕上对齐刻度，就完成了「像素↔毫米」的标定，比目测猜测可靠得多。

手机上能用吗？

能用，手机屏同样可以校准与测量；注意部分手机浏览器的页面缩放手势会改变像素映射，校准后不要缩放页面，否则需重新校准。

测量数据会被上传吗？

不会。校准、渲染、换算全部在浏览器本地完成，页面没有上传环节，也读不到你的摄像头或相册。

标定值记不住怎么办？

同一台设备不换屏幕缩放的话标定值基本不变，记住数字下次直接填；浏览器刷新后标定会回到默认值 3.78，重新拖一下就好。

为什么默认标定是 3.78？

这是 96dpi（Windows 传统逻辑分辨率）的理论值，即 96 像素 ÷ 25.4 毫米；它只是起点，真实屏幕几乎都需要校准修正。

可以量弯曲或不平的物体吗？

屏幕尺量的是贴在屏面上的平面投影，弯曲物体（如软尺、线材）请拉直后分段量，或改用像素长度输入换算。

延伸阅读

在线尺子怎么用：先校准，再读数

来自本站原创文章，讲清这个工具背后的算法与口径。