Обнаружение выемки экрана 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 применить верхнее смещение в 20 пикселей, чтобы поддержка выреза на экране была завершена.

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

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

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

  • Серия Huawei P20
  • Асус Зенфон 5 и 5Z
  • Хуавей Честь 10
  • Оппо R15 и R15 Pro
  • Оппо Ф7
  • Виво В9
  • Vivo X21 и X21 UD
  • OnePlus 6
  • LG G7 ThinQ
  • Леагоо С9
  • Оукитель U18
  • Sharp Aquos S3
  • ...

ios android cordova javascript css
person SuperJordir    schedule 21.11.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Лучше всего для поддержки всех устройств с надрезами было бы использовать «безопасную зону» 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

person David Briglio    schedule 22.11.2018
comment
То, что вы не пробовали, не работает. Безопасная зона — это просто фейковая реализация на андроиде, вы всегда будете получать ноль в любых условиях. - person TwilightSun; 11.10.2019

arrow_upward
2
arrow_downward

Безопасная область css отлично работает на iOS, но не на 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
person tobspr    schedule 27.04.2019

arrow_upward
0
arrow_downward

Это тоже может помочь. Поскольку я не добавляю прокладки к своему телу, я знаю, что если прокладки были добавлены, то это было из-за выемки камеры. Поэтому я использую этот код в 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...
person Post Impatica    schedule 07.04.2020