Ionic 离子角安全区CSS IOS问题

pokxtpni 于 2022-12-08 发布在 Ionic

关注(0)|答案(2)|浏览(211)

I have an Ionic v6.2 angular 14 app and this is my android and ios view: ANDROID:

IOS:

This is my code:

<ion-content *ngIf="(currentUser$ | async) as currentUser" class="page">
<ion-header>
  <ion-toolbar mode="ios" color="primary">
      <ion-title>{{currentUser.profile_name}}</ion-title>
      <ion-button slot="end" id="parameters-button" (click)="onGoToParameters()">
        <ion-icon slot="icon-only" name="settings-outline"></ion-icon>
      </ion-button>
    </ion-toolbar>
  </ion-header>
  <div class="sub_header">
</div>
</ion-content>

As you can see, my ion-header is under/overlay by the statusbar and the notch. I have tried --ion-safe-area-top but it seems equal to 0 with iphone13… If someone has a answer… please

ionic-framework

来源：https://stackoverflow.com/questions/73582588/ionic-angular-safe-area-css-ios-issue

2条答案

按热度按时间

omvjsjqw1#

看看这是否有帮助：

body {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}
ion-tab-bar {
  margin-bottom: calc(4px + env(safe-area-inset-top));
}

参考：https://github.com/apache/cordova-ios/issues/964

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

iyr7buue2#

You must set viewport-fit=cover in your html meta tag. This css-tricks article explains a bit.
Here is my full meta tag:

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

I am using vite and I added this in src > index.html inside the <head> tag.

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

我来回答

Ionic 离子角安全区CSS IOS问题

2条答案

相关问题

热门标签

最新问答