在 iPhone X 上使用 Ionic 4

Question

让我们从 Ionic 信息开始：

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

因此，在使用 Devapp 在 iPhone X 上进行测试时，我对 Ionic 4 有一个奇怪的问题（因为我现在在 Windows 上）

在特定页面上，有一个 div 加载在页面顶部的正中央，起初，它击中了 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')
    }
  }

所以我所做的基本上是在顶部放置一个 id 为“缺口​​”的 div，每当函数看到它是 iPhone X 时，它就会给 div 一个 2.5em 的高度，这会移动 2.5em 高度下的所有东西，从而将其移出凹槽。

事情就是这样，必须有一种“非hacky”的方式来做到这一点。请记住，这是一个没有任何类型的离子标题或工具栏的页面。只是一堆div（这不能改变）。

有没有更好的方法来检测 iPhone X/XS/XS Max（或其他任何东西）并自动将东西移出缺口区域？

Answer 1

使用 margin-top 而不是 padding-top 对我有用！

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

Answer 2

尝试将其添加到您的全局 css 中：

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