header 中的 Ionic 5 ion-searchbar 与 ios 中的状态栏重叠

Question

在我的 Ionic 5 应用程序中，我在 header 中有一个 ion-searchbar。它与 ios.

中的状态栏重叠

page.html

<ion-header>
  <ion-searchbar clearIcon="close-sharp" [(ngModel)]="searchTerm"
    debounce="1500" showCancelButton="true" (ionChange)="onSearch()" (ionCancel)="toggleSearch()">
  </ion-searchbar>
</ion-header>

我试过把它放在ion-toolbar中。结果一样。

app.component.ts

this.statusBar.styleDefault();

我试过 statusBar.overlaysWebView(false) 但没有用。

index.html

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

Answer 1

如前所述，此问题已得到解答。但是，该答案中缺少的是您可能需要同时支持较旧和较新的 iOS 设备。这就是为我修复它的原因：

 @media(orientation: portrait) {
     ion-content {
      padding-top: constant(safe-area-inset-top); //ios 11.2
      padding-top: env(safe-area-inset-top); //ios 11.1
   }
 }

header 中的 Ionic 5 ion-searchbar 与 ios 中的状态栏重叠

Ionic 5 ion-searchbar in header overlapping with status bar in ios

statusbar

ios

searchbar

ionic-framework

ionic5