обнаружение засечек на экране cordova / phonegap (для всех телефонов, не только iPhone X)

Question

Я хотел бы интегрировать поддержку метки экрана для моего приложения Cordova.Однако пару месяцев назад iPhone X был единственным смартфоном с выемкой на экране, поэтому его обнаружение и решение было довольно простым:

(function(){

  // Really basic check for the ios platform
  // /5722711/opredelit-yavlyaetsya-li-ustroistvo-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, так что поддержка надреза экрана завершена.

Однако по мере того, как все больше и больше телефонов начинают использовать этот надрез экрана, обнаружение становится намного сложнее, и я не знаю, с чего начать.У кого-нибудь есть хорошее представление о том, как решить эту проблему?

Как вы можете видеть ниже, многие компании, выпускающие смартфоны, начинают использовать метку экрана, и хорошее приложение должно поддерживать все устройства, верно?

Телефоны с выемкой на экране:

• Серия Huawei P20
• Asus ZenFone 5 и 5Z
• Huawei Honor 10
• Oppo R15 и R15Pro
• Oppo F7
• Vivo V9
• Vivo X21 и X21 UD
• OnePlus 6
• LG G7 ThinQ
• Leagoo S9
• Oukitel U18
• Sharp Aquos S3
• ...

Answer 1

Безопасная область CSS работает нормально на iOS, но не на 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 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