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*/
}
相关推荐
Surplusx几秒前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
sheji34166 分钟前
【开题答辩全过程】以 基于Java的智慧环卫垃圾收运管理系统设计与实现为例,包含答辩的问题和答案
java·开发语言
jason成都13 分钟前
实战 | 国产数据库 R2DBC-JDBC 桥接踩坑记 - JetLinks适配达梦数据库
java·数据库·物联网
BullSmall18 分钟前
SEDA (Staged Event-Driven Architecture, 分阶段事件驱动架构
java·spring·架构
小宇的天下22 分钟前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
Coder_Boy_1 小时前
基于SpringAI的在线考试系统-DDD(领域驱动设计)核心概念及落地架构全总结(含事件驱动协同逻辑)
java·人工智能·spring boot·微服务·架构·事件驱动·领域驱动
黎雁·泠崖1 小时前
Java&C语法对比:分支与循环结构核心全解析
java·c语言
鹿角片ljp1 小时前
Java IO流案例:使用缓冲流恢复《出师表》文章顺序
java·开发语言·windows
毕设源码-郭学长1 小时前
【开题答辩全过程】以 广告投放管理系统为例,包含答辩的问题和答案
java
一只小bit1 小时前
Qt 文件:QFile 文件读写与管理教程
前端·c++·qt·gui