携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情
今天，我们来探讨下这个问题：
在不需要用户参与的情况下，我们能否在浏览器上实现物理长度的 1 厘米呢？
我们先来简单给个答案：
答案（点击展开）
代码语言：javascript复制在用户不参与的情况下，我们不能靠程序在网页上获取到准确的浏览器物理长度 1 厘米。本文基于本人实际开发内容的记录
厘米和像素
厘米跟其他的单位（比如英寸）有明确的转换关系。而跟像素没有明确的转换关系（换一个浏览器可能得到的长度就不同了）。
像素受到 dpr 等的影响。
对于 dpr，ppi 等相关知识点，读者可自行百度
我们谈到电脑屏幕的时候，都是使用国际长度单位 inch 英寸来表达，而英寸和厘米之间是有固定的关系的：
1 inch = 2.54cm
实现
嗯，在请教了公司的大佬和发起网络询问之后 How to calculate 1cm equal ? px in website?，得到总结：
既然我们不能单纯的通过程序去实现浏览器上的物理长度 1 厘米。那么，我们可以考虑让用户以最小的成本参与进来。我们可以考虑下面的这两个方案：
方案1:
答案（点击展开）
代码语言：javascript复制1. 我们可以通过 window.screen 的属性来得到浏览器的尺寸
2. 通过 Math.sqrt() 方法算出斜边的长度（ * px）
3. 我们可以让用户输入当前显示器的尺寸（ * 英寸），我们通过公式转换成 * cm
4. 之后我们就可以计算出在当前浏览器中 1cm 等于 ？px 了
5. 将相应数值缓存下来，下次打开浏览器的时候调用缓存方案2:
答案（点击展开）
代码语言：javascript复制1. 我们提供一个物理尺寸给用户
2. 提供一个默认的 ppi 的数值选择范围，
类似站点 https://louischan.github.io/ruler-html/ 【见下图】。
通过自己设定的公式计算，比如 chartContainerWidth / (PPiValue / 2.54)
3. 当调节到一定距离的符合要求的时候，将相应数值缓存下来，下次打开浏览器的时候调用缓存
当然，读者有什么更好实现的方案，可以留言交流。
往期精彩推荐
- Dart 知识点 - 数据类型
- Flutter 开发出现的那些 Bugs 和解决方案「持续更新... 」
如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏
