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*/
}
相关推荐
幼儿园技术家11 分钟前
嵌套 H5 的跨端通信:iOS / Android / 小程序 / 浏览器
前端·js or ts
一只小阿乐21 分钟前
TypeScript中的React开发
前端·javascript·typescript·react
chools22 分钟前
Java后端拥抱AI开发之个人学习路线 - - Spring AI【第四期】(Tool + MCP)
java·人工智能·学习·spring
亦暖筑序25 分钟前
多轮对话的记忆心脏:ChatMemory 滑动窗口原理
java·人工智能
AAAAA924025 分钟前
物联网BOM成本管理:精准化、智能化与可持续化
java·物联网·struts
用户97141718142725 分钟前
vite项目开发环境启动白屏
前端
Highcharts.js25 分钟前
Highcharts客户端导出使用文档说明|图表导出模块讲解
前端·javascript·pdf·highcharts·图表导出
上山打牛30 分钟前
cornerstone3D 通过二进制渲染影像
前端
967733 分钟前
springMVC请求处理全过程
java
一只小阿乐34 分钟前
react路由中使用context
前端·javascript·react.js·context 上下文