研究这个是因为我想在小程序中做一把尺子工具引起的。
部分概念了解
devicePixelRadio
devicePixelRadio 设备像素比
指 设备物理像素 与 设备独立像素( device-independent pixels (dips) ) 的比值
js可以通过 window.devicePixelRadio 来获取
公式表示就是：$ window.devicePixelRatio = \dfrac\{ 设备物理像素 \} {dips} $
设备物理像素：设备能显示的最小单位。
设备独立像素：独立于设备的用于逻辑上衡量像素的单位。( 例如： css中的px就可以看做是设备的独立像素 )
所以在网页中devicePixelRadio即指：一个css像素代表多少个物理像素
例如： iphone6的devicePixelRadio为2 => 意思是：在iphone6中1px等于2个物理像素
dip或dp
在上面出现了dips。
dip（设备独立像素）。
dp，在屏幕点密度为160ppi时 1dp = 1px。
dip与dp相同。
他们是是安卓开发用的单位。因为安卓设备屏幕众多不可能为每个屏幕单独开发，所以用公式 px = dp * ( ppi / 160 ) 计算在不同屏幕上的像素数。
PPI (Pixel per inch)
指 每英寸 对角线上 所拥有的 像素 数 。
手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。
$ PPI = \dfrac{ \sqrt{x^2+y^2} } {屏幕尺寸(英寸)} $
x: 手机长的像素数
y: 手机宽的像素数
1英寸(in) = 2.54厘米(cm)
DPI
出现了PPI就顺便把DPI也了解下。
DPI指：每英寸中，取样、可显示或输出 [点] 的数目
DPI 和 PPI 的区别
DPI 全称 dots per inch(每英寸点数)
PPI 全称 pixels per inch(每英寸像素数)
要解释这两个词应结合他们出现的环境。
-
例如 dot 可以指印刷的墨点，可以指喷墨打印的墨点，可以指扫描仪的采样点，可以指数字图像的最小单位（即 pixel），可以指屏幕的物理像素，可以指操作系统的抽象像素……在不同的语境下可以指不同的概念。
-
而 pixel 也可以指数字图像的数据 pixel，可以指屏幕物理像素，也可以指代操作系统的抽象像素……在不同语境下的意义也不同。
DPI事实上也用于显示器，例如Python图片用dpi设置，显示器一点对一像素，所以对于显示器来说 1 ppi = 1 dpi。
在小程序中做一把尺子工具
ps: css中的1px并不等于设备的1px
要在小程序中做一把尺子工具，最关键的部分就是我们要知道
在当前设备中 1cm有多少 px。
求出 1cm = ?px
在小程序中通过wx.getSystemInfo接口，我们能够拿到的，可能对我们有用的参数：
| 属性 | 说明 |
|---|---|
| model | 设备型号 |
| pixelRatio | 设备像素比 |
| screenWidth | 屏幕宽度，单位px |
| screenHeight | 屏幕高度，单位px |
| ... | ...... |
例：
小米8
从网上查到小米8的参数:
主屏尺寸： 6.21英寸
主屏分辨率： 2248x1080像素
屏幕像素密度: 402ppi
屏幕比: 18.7:9(刘海型)
小程序中拿到的参数
model： MI 8
pixelRatio： 2.75
screenWidth： 393
screenHeight： 818
算出分辨率看看：(818 * 2.75) x (393 * 2.75) 即 2249.5 x 1080.75
(出现误差...)
四舍五入的话：2250 x 1081
保留整数的话：2249 x 1080
算出PPI看看：缺少 [屏幕尺寸] 算不了...
假设让用户自行输入手机屏幕尺寸。
算出PPI(用刚刚保留整数的) => 2494.87495 / 6.21 = 401.7512
即1英寸下有约 402 个物理像素
则1厘米下有约 402 / 2.54 约等于 158 个物理像素
则1厘米下有像素 158 / 2.75 约 57px
整理一下：去除最后的 除以 pixelRatio 直接用screenWidth和screenHeight：
算出PPI(用刚刚保留整数的) => 907.509229 / 6.21 = 146.136752
即1英寸下(ppi)有约 146 个像素
则1厘米下有约 146 / 2.54 = 57.480315 约等于 57 个像素
经过我一页纸的草稿后，1cm 下 有多少px 的公式为：
$ \dfrac{ \sqrt{x^2+y^2} } {2.54*屏幕尺寸(英寸)} $
js
/*
* screenWidth: 屏幕宽
* screenHeight: 屏幕长
* phoneSize: 屏幕尺寸(英寸)
*/
getPx(screenWidth, screenHeight, phoneSize) {
let _Z = phoneSize
let _X = screenWidth
let _Y = screenHeight;
let divisor1 = Math.sqrt(_X * _X + _Y * _Y);
let divisor2 = _Z * 2.54;
let now_px = divisor1 / divisor2;
now_px = Math.round(now_px * 10) / 10; /* 保留一位小数并四舍五入 */
return now_px;
}
> getPx(818, 393, 6.21)
> 57.5
2021-12 更新
有一天开启了安卓的三大金刚键，发现小程序返回的screenHeight竟然不包括三大金刚键部分，giao，所以分辨率也要用户手动输入...
成果
评论区