在 React Native 中获取屏幕 DPI

Question

上下文：

我正在尝试创建一个能够使用真实世界维度的应用程序。在我的特殊情况下，即使不是 100% 准确也没关系；但是，越准确越好。

例如：如果我试图展示一个 3 厘米宽的正方形，而实际上我展示了一个 2.8 厘米宽的正方形，这是可以接受的。

问题：

虽然似乎有办法以像素为单位获取屏幕的宽度和高度，但无法以 cm/in 获取屏幕 DPI 或屏幕的宽度和高度。

我的问题：如何获取或计算屏幕的 DPI？如果这不可能，是否有另一种方法可以尝试使用真实世界的测量值？

Answer 1

您可以尝试使用 React Native 的 PixelRatio.get() 来计算。此方法将 return 乘数 1 等于 mdpi 屏幕 (160 dpi)。因此，如果 PixelRatio.get() returns 1.5，那么它是一个 hdpi 屏幕 (160 * 1.5 = 240 dpi)。

在 mdpi 屏幕上：

1 inch = 160 pixels
1 inch = 2.54 cm
-----------------------
1 cm = 62.992126 pixels

所以要在这个屏幕上渲染 3cm 宽的东西，它需要 189 像素。

同样，在 xhdpi 屏幕上 (PixelRatio.get() = 2) 例如：

1 inch = 320 pixels
1 inch = 2.54 cm
-----------------------
1 cm = 125.98425 pixels

3 厘米宽的东西必须是 378 像素。

Answer 2

这不完全正确，您正在计算 dpi 的近似值，而不是实际 dpi。

pixelRatio 介于真实像素和独立像素之间：

    real pixel distance (px) = pixelRatio * independente pixel distance (dp)

以华为 Y9s (2019) 为例 指标来自 https://yesviz.com/devices.php

  width in independant pixel = 360 dp
  width in real pixel = 1080 px
  density in independant pixel = 130 dip
  density in real pixel = 391 dpi
  ratio = 3
  
  the upper formula gives us: 360dp * 3 ≈ 1080px => all good    

  but ratio = 3 
  is different from : dpi / 160 = 391 /160 = 2.44

Android 混淆了实际的独立密度和桶密度值。 (https://www.youtube.com/watch?v=zhszwkcay2A)

但是渲染是不同的，如果你在两个苹果设备上显示一个 div 的 320dp :

Ipad Pro 12.9'' (2020) with 132 density in independant pixels => div is printed 61mm or 2.36inch on the screen

Iphone 11 (2019) with 163 density in independant pixels => div is printed 50mm or 2inch on the screen

所以从技术上讲，与密度无关的像素在每个设备上都可以近似为 160dip

而相应的approximation of density in real pixel: 桶密度值。我们称它为 ~dpi。可以用 pixelRatio

检索

~dpi = pixelRatio * 160

在 React Native 中获取屏幕 DPI

Get screen DPI in react native

dpi

react-native