cordova/phonegap 屏幕缺口检测（适用于所有手机，不仅适用于 iPhone X）

Posted 2023-05-06

【中文标题】cordova/phonegap 屏幕缺口检测（适用于所有手机，不仅适用于 iPhone X）

【英文标题】：cordova/phonegap screen notch detection (for all phones, not only iPhone X)

【发布时间】：2019-04-24 00:58:35

【问题描述】：

我想为我的 cordova 应用程序集成屏幕缺口支持。 然而几个月前，iPhone X 是唯一一款带有屏幕缺口的智能手机，因此检测和解决它非常简单：

(function()

  // Really basic check for the ios platform
  // https://***.com/questions/9038625/detect-if-device-is-ios
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

  // Get the device pixel ratio
  var ratio = window.devicePixelRatio || 1;

  // Define the users device screen dimensions
  var screen = 
    width : window.screen.width * ratio,
    height : window.screen.height * ratio
  ;

  // iPhone X Detection
  if (iOS && screen.width == 1125 && screen.height === 2436) 
    alert('iPhoneX Detected!');
  
)();

然后，我可以使用 javascript 应用 20px 的顶部偏移量，这样屏幕缺口支持就完成了。

但是随着越来越多的手机开始使用此屏幕缺口，检测变得更加复杂，我不知道从哪里开始。有没有人知道如何解决这个问题？

正如您在下面看到的，许多智能手机公司开始使用屏幕缺口，一个好的应用应该支持所有设备，对吧？

带有屏幕缺口的手机：

华为P20系列 华硕 ZenFone 5 和 5Z 华为荣耀10 OPPO R15 和 R15 Pro OPPO F7 Vivo V9 Vivo X21 和 X21 UD 一加 6 LG G7 ThinQ Leagoo S9 Oukitel U18 夏普 Aquos S3 ...

【参考方案1】：

css 安全区域在 iO 上确实可以正常工作，但在 android 上却不行。由于我必须在 android 上检测缺口，所以我编写了一个小的 cordova 插件，它允许您获取窗口插图：

https://www.npmjs.com/package/cordova-plugin-android-notch

window.AndroidNotch.hasCutout(success => function(cutout) => 
    alert("Cutout: " + cutout);
));

window.AndroidNotch.getInsetTop(success => function(insetSize) => 
    alert("Top Inset: " + insetSize);
));

// There is also getInsetRight, getInsetBottom, getInsetLeft

【参考方案2】：

支持所有缺口设备的最佳选择是使用 css“安全区域”，而不是尝试保留所有带缺口设备的目录并应用您的逻辑。

教程： https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

[更新]：这在 Android 设备上不起作用，尽管 MDN 支持：https://developer.mozilla.org/en-US/docs/Web/CSS/env

【讨论】：

你没有尝试的东西不起作用。安全区域只是 android 上的一个假实现，在任何情况下你总是会得到零。

【参考方案3】：

这也可能有所帮助。因为我没有在我的身体上添加填充物，所以我知道如果添加了填充物，那是因为相机缺口。所以我在 Angular 中使用这段代码来获取顶部和底部的填充（或零）。

ngAfterViewInit() 
    const topPadding = document.body.style.paddingTop;
    const botPadding = document.body.style.paddingBottom;
    const regex = /\d+/;
    const tp = regex.exec(topPadding);
    const bt = regex.exec(botPadding);
    const toppad = (tp) ? parseInt(tp[0].valueOf(), 10) : 0;
    const botpad = (bt) ? parseInt(bt[0].valueOf(), 10) : 0;
    // use toppad and botpad however you like.
    ...etc...