检测手机凹口的更好方法

Question

我有一种方法可以检测iPhone上的凹口，它可以工作。。。但我刚发现它不太好用。大约五分之一的应用程序启动，我看到功能报告手机没有凹口，而实际上它有凹口。

当我的应用程序deviceReady()状态被激活时，我会检查设备是否有缺口，然后将true/false值分配给我稍后使用的变量。如前所述，大约五分之一的时间它会返回false。我认为这是一个定时问题，函数在DOM完全加载之前评估DOM，导致检测方法失败。

function hasNotch() {
if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {
var div = document.createElement('div');
div.style.paddingBottom = 'env(safe-area-inset-bottom)';
document.body.appendChild(div);
setTimeout(function() {
var calculatedPadding = parseInt(window.getComputedStyle(div).paddingBottom, 10);
document.body.removeChild(div);
if (calculatedPadding > 0) {
errMgmt("preIndex/hasNotch ",101.1,"READY: Notch Detected") ;
return true ;
} else {
errMgmt("preIndex/hasNotch ",101.2,"READY: Notch Not Detected") ;
return false ;
}
},100) ;
} else {
errMgmt("preIndex/hasNotch ",101.3,"READY: Notch Not Supported") ;
return false ;
}
}
$ionicPlatform.ready(function() {
$rootScope.hasNotch = hasNotch() ;
...
}) ;

然后在我的登录页控制器中：

.controller('HomeCtrl', function($rootScope,$scope,$state,$stateParams,$ionicModal,$q,apiService) {
if ($rootScope.hasNotch == true) {
.. do css stuff ..
}
}) ;

当检测失败时，它总是返回消息READY: Notch Not Detected。。。它没有一次返回READY: Notch Not Supported，这意味着CSS.supports正在工作，但不是关于calculatedPadding的部分。

登录页的控制器中需要true/false值，当它失败时会导致CSS布局问题。要么hasNotch()太慢，应用程序init触发登录页的速度比hasNotch()的响应快，要么我的功能实际上有其他问题。

顺便说一句，我研究了不同的方法来检测安卓手机上的缺口——这两个插件似乎有问题，而且/或者已经不受支持了。希望为安卓系统找到一个可靠的解决方案。。。。或者更好的是，一个适用于两种iOS类型的通用解决方案。

Answer 1

我想出了一个解决方案，但我仍然希望有更好的方法。它可以在应用程序初始化期间检测到手机notch，而不必依赖DOM评估。我已经测试了该应用程序超过25次，到目前为止，这种新方法每次都能检测到缺口。当我对其他事情进行编码时，我将继续评估结果，但到目前为止还不错。以下是我所做的。

我从设备上删除了支票Ready:

$ionicPlatform.ready(function() {
$rootScope.hasNotch = hasNotch() ;
...
}) ;

在我的登录页控制器中：

.controller('HomeCtrl', function($rootScope,$scope,$state,$stateParams,$ionicModal,$q,apiService) {
$scope.hasNotch = null ;
var watchNotch = $scope.$watch('hasNotch',function() {
//begin watching for var change
deviceData.hasNotch = $scope.hasNotch ;
$scope.doSomething() ;
watchNotch() ;  // kill watch
}) ;  
if (ionic.Platform.isIOS()) {
$scope.hasNotch = hasNotch() ;
} else {
deviceData.hasNotch = false ;
$scope.doSomething() ;    
watchNotch() ;  // kill notch
}
}) ;

现在我只需要找到一个可靠的插件来检测Android凹口。。。。说起来容易做起来难。