反应原生检查平板电脑或屏幕是不是以英寸为单位

Posted 2023-03-15

【中文标题】反应原生检查平板电脑或屏幕是不是以英寸为单位

【英文标题】：React native check if tablet or screen in inches反应原生检查平板电脑或屏幕是否以英寸为单位

【发布时间】：2017-06-15 08:40:42

【问题描述】：

我为平板电脑和移动设备建立了不同的渲染逻辑。我想知道是否有办法获取以英寸为单位的屏幕尺寸，或者甚至有任何模块可以自动检测设备是否为平板电脑。

我不直接使用尺寸 api 来获取屏幕分辨率的原因是有许多 android 平板电脑的分辨率低于许多移动设备。

谢谢。

【参考方案1】：

根据@martinarroyo 的回答，一种使用react-native-device-info 包的方法。

然而，android 实现是基于屏幕分辨率的。这可能是个问题，因为有许多平板设备的分辨率低于许多移动设备，这可能会导致问题。

我将使用并建议的解决方案是使用react-native-device-info 用于苹果设备和安卓设备，并使用以下类型的简单比率逻辑：

function isTabletBasedOnRatio(ratio)

if(ratio > 1.6)
    return false;
else
    return true;

这不是一个完美的解决方案，但有许多小型平板电脑也有类似手机的比例，甚至是平板手机（android 是模糊的），这个解决方案也适用于这些。

【讨论】：

您能否详细说明这种比率类型的工作原理以及此屋檐下有多少设备。

你能解释一下为什么是 1.6 吗？

当时这是一个合理的比例，但现在我仍然不确定如何处理这个问题。只是一个启发式解决方案

【参考方案2】：

您可以将react-native-device-info 包与Dimensions API 一起使用。检查isTablet()方法，根据结果应用不同的样式。

【讨论】：

嘿马丁，我刚刚查看了这个包，我意识到即使它适用于苹果设备，Android 的逻辑也是基于屏幕分辨率的。如果您不介意，我将使用您的答案并将其与我自己的答案合并。

当然，如果你能发布你的最终解决方案也会很有帮助:)

【参考方案3】：

如果您不想使用库react-native-device-info 可以使用下面的代码，不确定它是否完美但可能会有所帮助

export const isTablet = () => 
  let pixelDensity = PixelRatio.get();
  const adjustedWidth = screenWidth * pixelDensity;
  const adjustedHeight = screenHeight * pixelDensity;
  if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) 
    return true;
   else
    return (
      pixelDensity === 2 && (adjustedWidth >= 1920 || adjustedHeight >= 1920)
    );
;

【参考方案4】：

react-native-device-detection

if(Device.isTablet) 
  Object.assign(styles, 
    ...
  );

基于 PixelRatio 和屏幕的高度、宽度。