离子6 -只有一半的头部显示

Question

我使用Ionic 6/Angular，并在一个组件中有以下html:

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

在chrome移动视图中，它看起来不错，但在我的移动设备上，我只能看到一半的标题。

下面是截图:

截图在这里

有什么问题吗?

Answer 1

这个元素需要一点填充。

您必须在"variables.scss"中添加变量ion-safe-area-top。文件。

:root {
...
--ion-safe-area-bottom: 22px;
}

还需要为ion-header元素中的第一个ion-toolbar添加样式。

ion-header ion-toolbar:first-of-type{
padding-top: var(--ion-safe-area-top, 0);
}

Answer 2

不确定确切的问题是什么，但我能够通过

解决它在v6上创建新项目->将旧项目中的文件复制到新项目中->重建android应用程序，问题消失了。

Answer 3

我也遇到过同样的问题，这个解决了我的问题。

由于这个问题只发生在Android上，我定义了一个变量来检测设备是否是Android。如果是，则对标题

应用填充在app.component.ts

if (this.platform.platforms().includes("android"))
this.isAndroid = true

在app.component.html<ion-header [translucent]="true" [class]="isAndroid? 'android-header' : ''">

在app.component.css

.android-header { 
padding-top: 20px; 
}