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

Posted

技术标签:

【中文标题】Ionic iPhone X 安全区域无法正常工作【英文标题】:Ionic iPhone X safe areas not working properly 【发布时间】:2017-12-31 17:49:01 【问题描述】:

我正在尝试在顶部工具栏和底部选项卡区域之间放置一个。我需要它在 iPhone 5-X 和 ios 10-11 上工作。如果您忽略iOS10,则没有问题,但我还需要旧版本才能工作。这是我的CSS。 “margin-top”给出了 iOS 10 的错误。如果我使用“padding-top”,那么它在 iPhone X 上不起作用。这是 LoadingController 的封面,所以我不想以编程方式将它从 JS 排序到html(老实说,不知道如何访问 HTML 以加载控制器)。我已经为谷歌地图以编程方式解决了这个问题,但想知道是否有通过 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

【问题讨论】:

【参考方案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+ */

并分别减少 20px 顶部/底部移动。

【讨论】:

在哪里写这个 CSS?

以上是关于Ionic iPhone X 安全区域无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

iOS安全区域无法在真实设备上运行

自动布局无法正确处理 iPhone X 缺口

NativeScript iPhone X 将内容放在安全区域

如何设置状态栏或安全区域以删除 iPhone X 上的空白?

iPhone X - 设置主页指示器周围区域的颜色

如何使用 Swift 制作具有 iPhone X 安全区域约束的 Webkit webView?