Question

我做了所有必需的更新，并将所需的代码添加到index.html中的meta，但在内容部分开始之前，我仍然在标题的底部获得了空格。请看截图。此外，似乎正在削减标题。

这是我的元：

<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中我明确地改变了工具栏的高度，如下所示：

ComponentDidMount

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

Answer 2

要详细说明是否要更改导航栏的高度，可以直接在variables.scss中进行设置，以便可以全局设置：

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

Answer 3

首先要检查的是应该像这样的元

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链接：https://github.com/apache/cordova-plugin-statusbar.git

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

.platform-ios.platform-cordova：not（.fullscreen）并在其中找到工具栏ios，并根据需要调整标题属性。

在Ionic 3中Header之后的Iphone X空间

3 个答案: