Iphone X space 在 Ionic 3 中的 Header 之后

Question

我做了所有需要的更新，并在 index.html 中将需要的代码添加到元数据中，但在内容部分开始之前，header 底部的 space .请看截图。另外，标题好像被删了。

这是我的元数据：

<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">

我的HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Saved</ion-title>
  </ion-toolbar>
</ion-header>

我的离子信息： 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.4
Ionic Framework    : ionic-angular 3.9.2

系统：

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

Answer 1

所以我的问题是，在 App.scss 中，我明确地更改了工具栏的高度，如下所示：

.toolbar-background-ios { 
  background: #ffffff;
  height: 70px;           //This was the problem
}

通过删除高度属性，所有这些都适用于 iPhone X 和更早的 iPhone 7 plus。

Answer 2

如果您想更改导航栏的高度，请直接在 variables.scss 中进行设置，这样就可以像这样全局设置：

$toolbar-ios-height: 70px;
$toolbar-md-height: 70px;

Answer 3

首先要检查的是 Meta 应该是这样的

name="viewport" content="viewport-fit=cover, width=device-width, user-scalable=no, initial-scale=1, maximum-scale =1, minimum-scale=1

如果它不能解决您的问题，请尝试更新状态酒吧插件。运行以下命令。

ionic cordova 插件添加 https://github.com/apache/cordova-plugin-statusbar.git

但在此之前删除之前安装的状态栏插件然后安装上面的肯定会解决你的问题。

参考文献 GitHub link : https://github.com/apache/cordova-plugin-statusbar.git

如果问题仍然存在，请检查您的 Global.SCSS 文件并查找以下内容

.platform-ios.platform-cordova:not(.fullscreen) 并在其中找到 toolbar-ios 并根据您的要求调整 header 属性。

Iphone X space 在 Ionic 3 中的 Header 之后

Iphone X space after Header in Ionic 3

ionic-framework

ionic3

iphone-x