ionic4 app开发顶部避开灵动岛

Ionic 4 应用开发中，如果你想要避免应用在iPhone X及以上设备上出现灵动岛（Notch区域），可以采取以下策略：

1. **设置状态栏样式**: 确保你在 `ion-header` 或主题文件中设置了合适的 status bar 样式，比如隐藏状态栏 (`iosHideStatusBar: true`) 或将内容填充到状态栏下方 (`statusBarPadding: true`)。

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button default></ion-back-button>
    </ion-buttons>
    <ion-title>标题</ion-title>
  </ion-toolbar>
  <ion-backdrop class="ion-no-scroll" *ngIf="!isPhoneX"></ion-backdrop>
</ion-header>

添加 CSS 类 `ion-no-scroll` 到回退遮罩 (`ion-backdrop`) 仅在非 iPhone X 设备上启用滚动阻止。

2. **自适应布局**: 使用 Flexbox 或 CSS Grid 的特性，确保内容不会延伸到灵动岛上。对于屏幕方向变化，需要检查并调整布局，例如使用 `[mode]` 输入属性处理 portrait 和 landscape 模式。

header {
  flex-direction: column;
}

.content {
  // 如果灵动岛高度固定，可以设置内容的高度超过这个高度
  min-height: calc(100% - env(safe-area-inset-top));
}

3. **媒体查询**: 使用 CSS 媒体查询针对不同设备尺寸进行特定的样式调整，比如针对 iPhone X 及以上设备调整头部元素的布局。

@media (min-width: 375px) and (max-width: 812px) and (orientation: portrait) {
  .header {
    padding-top: env(safe-area-inset-top);
  }
}