cordova/phonegap屏幕缺口检测(适用于所有手机，而不仅仅是iPhone X)

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
• Oukitel U18
• Sharp Aquos S3

Answer 1

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

Answer 2

支持所有notch设备的最佳选择是使用css"安全区域"，而不是试图保留所有带有notch的设备的目录并应用您的逻辑。

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

[更新]：这在安卓设备上不起作用，尽管根据MDN支持：https://developer.mozilla.org/en-US/docs/Web/CSS/env

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