Ionic 6 -仅显示一半的标题

pobjuy32 于 2022-12-08 发布在 Ionic

关注(0)|答案(3)|浏览(196)

我使用的是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移动的View中，它看起来不错，但在我的手机上，我只能看到一半的页眉。
下面是截图：
screenshot here
有什么问题吗？

ionic-framework

来源：https://stackoverflow.com/questions/72256555/ionic-6-only-half-the-header-showing

3条答案

按热度按时间

nbysray51#

此元素需要一点填充。
您必须在“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);
}

赞(0）回复(0）举报 2022-12-08

dddzy1tm2#

不确定确切的问题是什么，但我能够解决它
在v6上创建一个新的项目-〉将文件从旧项目复制到新项目-〉重建Android应用程序，问题消失了。

赞(0）回复(0）举报 2022-12-08

ef1yzkbh3#

我也遇到了同样的问题，这为我解决了这个问题。
由于这个问题只发生在Andriod上，我定义了一个变量来检测设备是否是Android。
在应用程序组件.ts中

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

在app.component.html中
在app.component.css中

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

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic 6 -仅显示一半的标题

3条答案

相关问题

热门标签

最新问答