cordova/phonegap screen notch detection (for all phones, not only iPhone X)

Question

I would like to integrate screen notch support for my cordova application. However a couple months ago the iPhone X is was the only smartphone with a screen notch so the detection and solution for it was pretty easy:

(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!');
  }
})();

I could then, with javascript, apply a top-offset of 20px so the screen notch support is complete.

However as more and more phones start using this screen notch the detection gets a lot more complicated and I don't know where to start. Does anyone have a good idea on how one would settle this problem?

As you can see below a lot of smartphone companies are starting to use the screen notch and a good app should support all devices right?

Phones with screen notch:

• Huawei P20 series
• Asus ZenFone 5 and 5Z
• Huawei Honor 10
• Oppo R15 and R15 Pro
• Oppo F7
• Vivo V9
• Vivo X21 and X21 UD
• OnePlus 6
• LG G7 ThinQ
• Leagoo S9
• Oukitel U18
• Sharp Aquos S3
• ...

Answer 1

The css safe area does work fine on iOs, but it doesn't on android. Since I had to detect notches on android, I wrote a small cordova plugin which allows you to fetch the window insets:

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

Your best bet to support all notch devices would be to use css "safe area", instead of trying to keep a catalogue of all devices with notches and applying your logic.

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

[UPDATE]: This does not work on Android devices, despite being supported according to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/env

Answer 3

This may help too. Since I don't add padding to my body I know that if padding was added it was because of the camera notch. So I use this code in Angular to get the top and bottom padding (or zero).

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