iphone 底部安全区

1、OS方案一：使用原生占位（仅App端支持）

  • mainfest.json 文件 app-plus 节点下配下 safearea 
"safearea": {
  "background": "#CCCCCC",
  "bottom": {
    "offset": "auto"
  }  
}

2、iOS方案二：不使用原生占位（非App端可以不配置mainfest）

  • mainfest.json 文件 app-plus 节点下配下 safearea 
"safearea": {
  "background": "#CCCCCC",
  "bottom": {
    "offset": "none"
  }  
}
  • 在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配。微信小程序模拟器不支持，以真机为准。

比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距：

.box {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

注意：使用了pages.json里的原生tabbar，不管manifest里安全区设置如何，在tabbar下方都会留出空隙

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容