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*/
}
相关推荐
大模型码小白1 分钟前
Milvus 架构设计:从向量索引到分布式检索,AI 原生存储引擎的内部机制
java·大数据·人工智能·分布式·深度学习·milvus
稚南城才子,乌衣巷风流3 分钟前
链表(Linked List):数据结构详解与实战应用
java
NWU_LK6 分钟前
【WebFlux】第二篇 —— Project Reactor 核心数据类型
java
三84410 分钟前
笔记:在同一个物理服务器上通过nginx的虚拟主机生成多个不同的web站点
java·前端·nginx
double_eggm12 分钟前
uniapp.3
开发语言·前端·javascript
索西引擎26 分钟前
【React】状态提升模式:设计原理、权衡分析与架构决策框架
前端·react.js·架构
2501_9327502630 分钟前
Android 数据持久化解析
android·java
NWU_LK2 小时前
【WebFlux】第三篇 —— 常用操作符与数据流转换
java
胡萝卜术9 小时前
力扣5. 最长回文子串
前端·javascript·面试
我星期八休息9 小时前
网络编程—应用层HTTP协议
linux·运维·开发语言·前端·网络·网络协议·http