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*/
}
相关推荐
有脚就行5 小时前
第07篇-ReAct模式详解-推理与行动的交替循环
前端·react.js·前端框架
码匠许师傅5 小时前
【C++ 面试真题】32. 聊聊 C++ 的原子变量与无锁编程
java·c++·面试
不会就选b5 小时前
Linux之线程池(一)
java·开发语言
未来之窗软件服务5 小时前
Web 技能的自主测试系统开好处发架构思维-东方仙盟
大数据·前端·架构·仙盟创梦ide·东方仙盟
IT毕设实战小研5 小时前
基于大数据的二手车数据分析与预测
java·大数据·后端·爬虫·python·算法·课程设计
吠品5 小时前
OkHttp 多文件上传的一个实现
java·服务器·前端
lilian2335 小时前
Harmony os 技术实战|拼豆制图46:图片解码失败为何不能悄悄返回示例图
前端·javascript·华为·harmonyos
lingguangbuzhi5 小时前
【JAVA教程】java课程java学习编程
java·学习·教程
渡我白衣6 小时前
Acceptor模块的设计与实现
java·linux·服务器·开发语言·网络·c++·人工智能
zzzzzz3107 小时前
react-bits:从 36K Stars 的组件库,看动画交互组件该如何被评估
前端·react.js·动效