时间戳

首页 > 解决方案 > cordova/phonegap 屏幕缺口检测（适用于所有手机，不仅适用于 iPhone X）

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

问题描述

我想为我的科尔多瓦应用程序集成屏幕缺口支持。然而几个月前，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 的顶部偏移量，这样屏幕缺口支持就完成了。

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

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

带屏幕缺口的手机：

标签： javascriptandroidioscsscordova

解决方案

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

推荐阅读