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

Question

在我的 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)但没有用。

索引.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" />

标签： iosionic-frameworkstatusbarsearchbarionic5

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
   }
 }