网页实现 1CM 物理长度

4,518 阅读2分钟

今天,我们来探讨下这个问题:

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

我们先来简单给个答案:

答案(点击展开)
在用户不参与的情况下,我们不能靠程序在网页上获取到准确的浏览器物理长度 1 厘米。

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

厘米和像素

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

像素受到 dpr 等的影响。

对于 dprppi 等相关知识点,读者可自行百度

我们谈到电脑屏幕的时候,都是使用国际长度单位 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. 当调节到一定距离的符合要求的时候,将相应数值缓存下来,下次打开浏览器的时候调用缓存

ppi_demo.png

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

往期精彩推荐

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