网页实现 1CM 物理长度

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

今天，我们来探讨下这个问题：

在不需要用户参与的情况下，我们能否在浏览器上实现物理长度的 1 厘米呢？

我们先来简单给个答案：

在用户不参与的情况下，我们不能靠程序在网页上获取到准确的浏览器物理长度 1 厘米。

本文基于本人实际开发内容的记录

厘米和像素

厘米跟其他的单位（比如英寸）有明确的转换关系。而跟像素没有明确的转换关系（换一个浏览器可能得到的长度就不同了）。

像素受到 dpr 等的影响。

对于 dpr，ppi 等相关知识点，读者可自行百度

我们谈到电脑屏幕的时候，都是使用国际长度单位 inch 英寸来表达，而英寸和厘米之间是有固定的关系的：

1 inch = 2.54cm

实现

嗯，在请教了公司的大佬和发起网络询问之后 How to calculate 1cm equal ? px in website?，得到总结：

既然我们不能单纯的通过程序去实现浏览器上的物理长度 1 厘米。那么，我们可以考虑让用户以最小的成本参与进来。我们可以考虑下面的这两个方案：

方案1:

1. 我们可以通过 window.screen 的属性来得到浏览器的尺寸
2. 通过 Math.sqrt() 方法算出斜边的长度（ * px）
3. 我们可以让用户输入当前显示器的尺寸（ * 英寸），我们通过公式转换成 * cm
4. 之后我们就可以计算出在当前浏览器中 1cm 等于 ？px 了
5. 将相应数值缓存下来，下次打开浏览器的时候调用缓存

方案2:

1. 我们提供一个物理尺寸给用户
2. 提供一个默认的 ppi 的数值选择范围，
类似站点 https://louischan.github.io/ruler-html/ 【见下图】。
通过自己设定的公式计算，比如 chartContainerWidth / (PPiValue / 2.54)
3. 当调节到一定距离的符合要求的时候，将相应数值缓存下来，下次打开浏览器的时候调用缓存

当然，读者有什么更好实现的方案，可以留言交流。

往期精彩推荐

• Dart 知识点 - 数据类型
• Flutter 开发出现的那些 Bugs 和解决方案「持续更新... 」

如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏