在本机反应中获取屏幕 DPI答案

【问题标题】：Get screen DPI in react native在本机反应中获取屏幕 DPI
【发布时间】：2019-06-04 20:59:35
【问题描述】：

上下文：

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

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

问题：

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

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

【问题讨论】：

标签： react-native dpi

【解决方案1】：

您可以尝试使用 React Native 的 PixelRatio.get() 来计算这个。此方法将返回一个乘数，其中 1 等于 mdpi 屏幕 (160 dpi)。所以如果PixelRatio.get()返回1.5，那么它就是一个hdpi屏幕（160 * 1.5 = 240 dpi）。

在 mdpi 屏幕上：

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

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

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

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

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

【讨论】：

【解决方案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)

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

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

以及对应的密度近似实像素：桶密度值。我们称之为~dpi。可以用pixelRatio检索

~dpi = pixelRatio * 160

【讨论】：