Использование Ionic 4 на iPhone X

Question

Давайте начнем с ионной информации:

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 (cordova-lib@8.1.1)
   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

Так что у меня странная проблема с Ionic 4 при тестировании на iPhone X с использованием Devapp (так как я сейчас нахожусь в Windows)

На определенной странице есть разделитель, который загружается вверху страницы прямо в центре, вначале это попало в область метки для iPhone X. Теперь я временно решил эту проблему, выполнив следующую функцию:

  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')
    }
  }

Итак, в основном я поместил div вверху с идентификатором «notch», и всякий раз, когда функция видит, что это iPhone X, она дает div высоту 2.5em, что перемещает все под эти 2.5 их высота, тем самым перемещая ее в сторону выемки.

Но вот в чем дело, должен быть «нехакерский» способ сделать это. Имейте в виду, что это страница без заголовка и панели инструментов любого рода. Просто куча div (это нельзя изменить).

Есть ли лучший способ определения iPhone X / XS / XS Max (или чего-либо еще) и автоматического перемещения материала за пределы области надреза?

Answer 1

Попробуйте добавить это в свой глобальный CSS:

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