Using Ionic 4 on iPhone X

Question

Let's start out with the Ionic Info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Rohan\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

So I have a weird issue with Ionic 4 when testing out on iPhone X using the Devapp (since I'm on windows for now)

On a specific page, Theres a div that loads on top of the page right in the center, at first, this hit the notch area for iPhone X. Now i temporarily solved this issue by making the following function:

  checkModernAppleVariants() {
    let iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

    let ratio = window.devicePixelRatio || 1;
    let screen = {
      width: window.screen.width * ratio,
      height: window.screen.height * ratio
    };

    if (iOS && screen.width == 1125 && screen.height === 2436) {
      this.iPhoneXDetected = true;
      console.log('iPhone X detected');
      document.getElementById('notch').style.height="2.5em";
    } else {
      this.iPhoneXDetected = false;
      console.log('iPhone X not detected')
    }
  }

So what I did was basically put a div at the top with the id of 'notch', and whenever the function sees that it's an iPhone X, it gives the div a height of 2.5em, which moves everything under that 2.5em height, thereby moving it out of the way of the notch.

Here's the thing though, there has to be a "non-hacky" way of doing this. Keep in mind this is a page with no ion-header or toolbar of any sort. Just a bunch of divs (this can't be changed).

Is there a better method of detecting iPhone X/XS/XS Max (or whatever else) and automatically moving stuff out of the way of the notch area?

Answer 1

Using margin-top rather than padding-top worked for me!

body {
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
}

Answer 2

Try adding this in your global css:

body{
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}