javascript - cordova/phonegap屏幕缺口检测(仅适用于所有电话，不仅适用于iPhone X)

我想为我的cordova应用程序集成屏幕缺口支持。
但是，几个月前，iPhone X是唯一具有屏幕缺口的智能手机，因此检测和解决方案非常容易:

(function(){

  // Really basic check for the ios platform
  // https://stackoverflow.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

...

最佳答案

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

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

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