侧边栏壁纸
博主头像
DeQ

江流宛转绕芳甸,月照花林皆似霰

  • 累计撰写 23 篇文章
  • 累计创建 12 个标签
  • 累计收到 5 条评论

目 录CONTENT

文章目录

小程序(移动设备或网页)上使用单位厘米的研究

DeQ
DeQ
2020-02-24 / 0 评论 / 0 点赞 / 644 阅读 / 2,172 字

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

部分概念了解

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

成果

随手工具集直尺

0

评论区