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*/
}
相关推荐
消失的旧时光-19433 小时前
Java 线程池(第四篇):ScheduledThreadPoolExecutor 原理与定时任务执行机制全解析
java·开发语言
刃神太酷啦3 小时前
Linux 进程核心原理精讲:从体系结构到实战操作(含 fork / 状态 / 优先级)----《Hello Linux!》(6)
java·linux·运维·c语言·c++·算法·leetcode
king王一帅4 小时前
告别 AI 输出的重复解析:正常 markdown 解析渲染也能提速 2-10 倍以上
前端·javascript·ai编程
利刃大大4 小时前
【JavaSE】十五、线程同步wait | notify && 单例模式 && 阻塞队列 && 线程池 && 定时器
java·单例模式·线程池·定时器·阻塞队列
huangql5204 小时前
网络体系结构在Web前端性能优化中的应用完全指南
前端·性能优化
kevin_水滴石穿4 小时前
docker-compose.yml案例
java·服务器·开发语言
代码or搬砖4 小时前
ES6新增的新特性以及用法
前端·javascript·es6
LYFlied4 小时前
【一句话概述】前端性能优化从页面加载到展示
前端·性能优化
小番茄夫斯基4 小时前
Monorepo 架构:现代软件开发的代码管理革命
前端·javascript·架构
一只秋刀鱼4 小时前
从 0 到 1 构建 React + TypeScript 车辆租赁后台管理系统
前端·typescript