Ionic中iPhone X安全区域适配问题（兼容iOS10-11）

我刚好之前在Ionic3项目里踩过几乎一模一样的坑！咱们直接用纯CSS搞定，完全不用碰JS操作DOM。

问题核心分析 #

你现在的矛盾点很明确：iOS10不支持env()/constant()安全区域变量，用margin-top会让LoadingController位置异常偏移；而iPhoneX这类需要安全区域适配的机型，padding-top又没法和固定的top/bottom值配合到位。

纯CSS解决方案 #

我们可以用CSS的@supports特性，精准区分支持安全区域的iOS11+设备和不支持的iOS10设备，分别设置布局规则：

.loading-ios {
  /* 基础布局：铺满默认header（64px）和tabbar（49px）之间的区域 */
  position: absolute;
  top: 64px;
  bottom: 49px;
  left: 0;
  right: 0;
  background-color: white;
  opacity: 1 !important;
  
  /* 给iOS10及以下设备设置默认margin（无需安全区域适配） */
  margin-top: 0;
  margin-bottom: 0;
  
  /* 针对支持安全区域的iOS11+设备（含iPhoneX）调整布局 */
  @supports (margin-top: env(safe-area-inset-top)) {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
    /* 用calc把安全区域高度加到top和bottom上，避免被刘海/底部条遮挡 */
    top: calc(64px + env(safe-area-inset-top));
    bottom: calc(49px + env(safe-area-inset-bottom));
  }
}

方案逻辑说明 #

1. iOS10适配：iOS10不识别@supports里的env()条件，会直接使用上面的固定top/bottom和margin:0，刚好填充header和tabbar之间的空间，不会出现偏移问题。
2. iPhoneX/iOS11+适配：这类设备会触发@supports代码块，把安全区域高度加到top和bottom上，同时设置margin适配刘海和底部安全区域，保证LoadingController完全处于可用显示区域内。
3. 全机型覆盖：从iPhone5到X的所有屏幕尺寸都能适配，因为我们用的是Ionic3 iOS端默认的header/tabbar高度，再结合安全区域动态调整。

自定义调整提示 #

如果你的项目里header或tabbar不是默认的64px/49px高度，只需要把代码里对应的数值改成你实际使用的高度即可。

内容的提问来源于stack exchange，提问作者Dimitri