标题中的Ionic 5离子搜索栏与ios中的状态栏重叠[重复]答案

【问题标题】：Ionic 5 ion-searchbar in header overlapping with status bar in ios [duplicate]标题中的Ionic 5离子搜索栏与ios中的状态栏重叠[重复]
【发布时间】：2021-01-22 19:27:17
【问题描述】：

在我的 Ionic 5 应用程序的标题中有一个离子搜索栏。它与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 ionic-framework statusbar searchbar ionic5

【解决方案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
   }
 }

【讨论】：