Ionic iPhone X 安全区域无法正常工作

Question

我正在尝试在顶部工具栏和底部选项卡区域之间放置一个。我需要它在 iPhones 5-X 和 iOS 10-11 之间工作。如果忽略 iOS10，则没有问题，但我还需要旧版本才能工作。这是我的 CSS。 "margin-top" 给出 iOS 10 的错误。如果我使用 "padding-top" 那么它在 iPhone X 上不起作用。这是 LoadingController 封面，所以我不想要以编程方式将其从 JS 整理到 HTML（老实说，不知道如何访问 HTML 来加载控制器）。我已经为 Google 地图以编程方式解决了这个问题，但想知道是否有通过 CSS 的解决方案？我有所有最新版本的所有东西和 WKWebView。我的离子视图如下。

.loading-ios {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);

  background-color: white;
  opacity: 1 !important;
  position: absolute;
  top: 64px;
  bottom: 49px;
}

cli 包：

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

@ionic/app-scripts : 1.3.12
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

系统：

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v8.9.3
npm        : 5.5.1 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Answer 1

  margin-top: 20px; /* Status bar height on iOS 10 */
  margin-top: constant(safe-area-inset-top); /* Status bar height on iOS 11.0 */
  margin-top: env(safe-area-inset-top); /* Status bar height on iOS 11+ */

和缩小20pxtop/bottom分别移动。

Ionic iPhone X 安全区域无法正常工作

Ionic iPhone X safe areas not working properly

css

ionic-framework

ionic3

iphone-x

safearealayoutguide