标题中的 Ionic 5 离子搜索栏与 ios 中的状态栏重叠

如何解决标题中的 Ionic 5 离子搜索栏与 ios 中的状态栏重叠

在我的 Ionic 5 应用程序中，标题中有一个 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" />

解决方法

如上所述，此问题已得到解答。但是，该答案中缺少的是您可能需要同时支持较旧和较新的 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
   }
 }