ionic7开发处理ios端非安全区的边距问题

一、前言

        在开发移动端页面时，安卓一切正常，但是在ios上，据我所知是从苹果x开始，苹果就有安全区的概念，而非安全区是留给苹果的系统的交互区域，我们是不能动的，但是在开发过程中，总会出现页面元素，出现在非安全区的问题，这非常不对。我在ionic文档中也看了一下，试着解决，但是依然不对，所以在此记录一下

二、文档

        ionic文档相关地址：ion-content: Scrollable Component for Ionic App Content

总结：内容组件（ion-content）默认不自动添加针对安全区域的内边距，因为通常它会与其他组件（如页头、页脚）一起使用，而这些组件已经考虑了自身的内边距。但是，当内容组件独立使用时，可能需要手动添加安全区域的内边距以保证界面的美观和可用性。

三代码实现

// HTML结构
<template>
  <ion-page>
    <ion-content>
      <!--剩下的dom结构-->
    </ion-content>
  </ion-page>
</template>

// css部分即可解决(我这里只设置了顶部的非安全区，你也可以设置底部，甚至左侧)
ion-content {
    &::part(scroll) {
      padding-top: var(--ion-safe-area-top);
    }
  }

四结语

除了css控制这个安全区的填充外，还可以通过ionic的css类名，通过js获取全局的ionic内置的非安全区类名，获取到具体的距离单位，自己手动的用js设置边距也是可以的