Get Height of ion-content for phones with notch (i.e. iPhone X)

Ionic Framework Ionic Angular
1

Hi there,

I need to be able to determine the exact height of the ion-content. I have tried various things that tend to work for most cases for example:


  @ViewChild(IonContent, { static: true }) private content: IonContent;
  constructor(
){
    this.content.getScrollElement().then(scrollElement => {
  
      this.contentHeight = scrollElement.clientHeight
      this.scrollHeight = scrollElement.scrollHeight
})
}

The big issue is that I cannot find a way to correctly calculate the height for phones that have the notch, i.e. iPhone X.

Is there any style parameter that could be picked up from the DOM that would be different for those phones?
I’ve tested this one:

force-statusbar-padding{–ion-safe-area-top:(.*)px}

but it is not different for phones with a notch vs without…

2

Hacky?