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*/
}
相关推荐
葡萄城技术团队27 分钟前
1000 人协同压测的环境瓶颈排查:CPU 争用与 Wi\-Fi
前端
2301_7807896633 分钟前
跨平台适配!SDK 游戏盾兼容全终端游戏场景
java·网络·ddos
学长毕设1 小时前
基于springboot的食品仓库管理系统
java·spring boot·后端
excel2 小时前
Marked 与 Markdown 有什么区别?该怎么选?
前端
步行cgn2 小时前
FormHttpMessageConverter 详解:Spring MVC 中表单数据的读写转换器
java·spring·mvc
龙亘川2 小时前
构建城市公共安全数字底座:亘川智城智慧安防系统全维度解读
java·大数据·开发语言·人工智能·信息可视化
金銀銅鐵2 小时前
[Java] 用 CLI 展示 EnumMap 增删键值对时的内部变化
java·源码·ai编程
Da Da 泓2 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
秋天的怀念_David3 小时前
第二十二夜 · 数字迷雾
java·程序人生·算法
Raas1003 小时前
AI网关部署方案?从部署到上线全流程
java·开发语言·人工智能·gateway·ai网关·企业级ai网关·企业级ai产品