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*/
}
相关推荐
HoneyMoose2 分钟前
Jenkins 更新时候提示 Key 错误
java·开发语言
rannn_1113 分钟前
【苍穹外卖|Day10】Spring Task、订单状态定时处理、WebSocket、来单提醒、客户催单
java·后端·websocket·苍穹外卖
We་ct7 分钟前
LeetCode 114. 二叉树展开为链表:详细解题思路与 TS 实现
前端·数据结构·算法·leetcode·链表·typescript
cqbzcsq14 分钟前
MC Forge 1.20.1 mod开发学习笔记(战利品、标签、配方)
java·笔记·学习·mod·mc
追随者永远是胜利者15 分钟前
(LeetCode-Hot100)461. 汉明距离
java·算法·leetcode·职场和发展·go
人道领域19 分钟前
SpringBoot多环境配置实战指南
java·开发语言·spring boot·github
捷利迅分享26 分钟前
Android TV 4分屏独立播放电视应用完整开发方案
java
马猴烧酒.28 分钟前
【JAVA算法|hot100】栈类型题目详解笔记
java·笔记
Dragon Wu29 分钟前
SpringCloud 多模块下引入独立bom模块的正确架构方案
java·spring boot·后端·spring cloud·架构·springboot
L-李俊漩33 分钟前
手机端的google chrome 浏览器 怎么看响应的日志和请求报文
前端·chrome·智能手机