研究这个是因为我想在小程序中做一把尺子工具引起的。

部分概念了解

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，所以分辨率也要用户手动输入...

成果

随手工具集直尺