Question

我想为我的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
OnePlus 6
LG G7 ThinQ
Leagoo S9
Uukitel U18
Sharp Aquos S3
...

Answer 1

支持所有陷波设备的最佳选择是使用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

支持

Answer 2

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

Answer 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...

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

3 个答案: