Tengo un método para detectar la muesca en iPhones y funciona... pero me acabo de enterar que no funciona bien. Se inicia aproximadamente 1 de cada 5 aplicaciones, veo que la función informa que el teléfono no tiene la muesca cuando en realidad sí la tiene.
Cuando se activa el estado DeviceReady() de mi aplicación, verifico si el dispositivo tiene la muesca y luego asigno el valor verdadero/falso a una variable que uso más adelante. Como se mencionó, aproximadamente 1 de cada 5 veces devuelve false . Creo que es una cuestión de tiempo, la función está evaluando el DOM antes de que el DOM se haya cargado por completo, lo que hace que falle el método de detección.
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() ; ... }) ;Luego, en el controlador de mi página de destino:
.controller('HomeCtrl', function($rootScope,$scope,$state,$stateParams,$ionicModal,$q,apiService) { if ($rootScope.hasNotch == true) { .. do css stuff .. } }) ; Cuando no se detecta, siempre aparece el mensaje READY: Notch Not Detected devuelto... ni una sola vez ha devuelto READY: Notch Not Supported , lo que significa que CSS.supports está funcionando, pero no forma parte del calculatedPadding de relleno.
El valor true/false es necesario en el controlador de la página de destino y, cuando falla, causa problemas de diseño de CSS. O hasNotch() es demasiado lento y el inicio de la aplicación está activando la página de destino más rápido que la respuesta de hasNotch() o en realidad hay algo más mal con mi función.
En una nota al margen, he investigado diferentes métodos para detectar la muesca en los teléfonos Android: los dos complementos parecen tener problemas y/o ya no son compatibles. Esperaba una solución sólida para Android... o incluso mejor, una solución universal para ambos tipos de iOS.
Se me ocurrió una solución, pero sigo esperando que haya una mejor manera. Algo que pueda detectar una notch en el teléfono durante la inicialización de la aplicación en lugar de tener que depender de las evaluaciones DOM. He probado la aplicación más de 25 veces y hasta ahora este nuevo método ha detectado la muesca cada vez. Mientras codifico otras cosas, continuaré evaluando el resultado, pero hasta ahora todo bien. Aquí esta lo que hice.
Eliminé el cheque de deviceReady:
$ionicPlatform.ready(function() { $rootScope.hasNotch = hasNotch() ; ... }) ;Y en mi controlador de página de aterrizaje:
.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 } }) ;Ahora solo necesito encontrar un complemento confiable para detectar las muescas de Android... es más fácil decirlo que hacerlo.