uniapp 苹果安全域适配

一、使用原生占位(仅App端支持)
复制代码
//在manifest.json 文件中 app-plus 中配置
"safearea": {  
    "background": "#FFFFFF",  
    "bottom": {  
        "offset": "auto"  
    }  
}
二、不使用原生占位
复制代码
//(非App端可以不在manifest中配置)
"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}

获取系统信息

复制代码
 uni.getSystemInfo({
      success: (info) => {
        // 判断是否为iOS设备
        if (info.platform === 'ios') {
          // 去判断显示 安全边距
        }
      }
    });

动态绑定css 显示安全边距

复制代码
.xxx-view {  
    // 写在需要添加底部边距的盒子上
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
相关推荐
九皇叔叔10 分钟前
【03】微服务系列 之Nacos 注册中心(服务注册)
java·微服务·nacos·架构·注册中心·服务注册
天若有情67316 分钟前
XiangJsonCraft v1.2.0重大更新解读:本地配置优先+全量容错,JSON解耦开发体验再升级
前端·javascript·npm·json·xiangjsoncraft
Rysxt_21 分钟前
UniApp五大UI框架与uni-ui核心区别对比
uni-app·uni-ui
木辰風28 分钟前
PLSQL自定义自动替换(AutoReplace)
java·数据库·sql
2501_9445255433 分钟前
Flutter for OpenHarmony 个人理财管理App实战 - 预算详情页面
android·开发语言·前端·javascript·flutter·ecmascript
heartbeat..35 分钟前
Redis 中的锁:核心实现、类型与最佳实践
java·数据库·redis·缓存·并发
打小就很皮...1 小时前
《在 React/Vue 项目中引入 Supademo 实现交互式新手指引》
前端·supademo·新手指引
C澒1 小时前
系统初始化成功率下降排查实践
前端·安全·运维开发
1 小时前
java关于内部类
java·开发语言
好好沉淀1 小时前
Java 项目中的 .idea 与 target 文件夹
java·开发语言·intellij-idea