iPhone X Ionic 3 安全区域不工作

Question

我使用的是 xCode 9.2、Ionic 3 和所有最新版本（更新了我能想到的所有内容）并且我添加了以下内容：

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

在设备和模拟器中测试时，iPhone 7 一切正常，但 iPhone X 我遇到以下问题：

应用程序的顶部和底部部分也分别位于 top/bottom。我认为这与 iPhone X 上的新安全区有关。

我试过添加以下内容，但它没有用，因为它在所有设备的顶部给了我一个白色的 space。

<preference name="StatusBarOverlaysWebView" value="false" />

有没有人遇到过类似的问题？

我的 Ionic 信息：

cli 包：

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

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

@ionic/app-scripts : 3.1.6
Cordova Platforms  : ios 4.5.2
Ionic Framework    : ionic-angular 3.7.1

系统：

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v7.10.0
npm        : 4.2.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

环境变量：

ANDROID_HOME : not set

杂项：

backend : legacy

Answer 1

试试这个：

<meta name="viewport" viewport-fit=cover content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 2

我有 Ionic Angular 3.7.1（几个月大但还是太老了）。如果您更新到 3.9.2 或更高版本 (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#390-2017-11-08)，那么它就像一个魅力！

iPhone X Ionic 3 安全区域不工作

iPhone X Ionic 3 safe areas not working

ionic-framework

ionic3

iphone-x

safearealayoutguide