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*/
}
相关推荐
毕设源码-朱学姐16 小时前
【开题答辩全过程】以 高效便捷的民航订票系统为例,包含答辩的问题和答案
java
Refly16 小时前
【微信接入 OpenClaw 龙虾🦞】10分钟手把手教程完成接入,Claude 模型无限使用
前端·微信·github
零雲16 小时前
java面试:Spring事务失效的场景有哪些?
java·数据库·面试
恋猫de小郭16 小时前
为什么中转渠道的顶级模型会不好用?这是一个技术问题
前端·人工智能·ai编程
二月十六16 小时前
运行 ‘XXXX‘ 时出错 运行 XXXX时出错。命令行过长。 通过 JAR 清单或通过类路径文件缩短命令行,然后重新运行。
java·jar
发现一只大呆瓜16 小时前
React-深度拆解 React路由:从实战进阶到底层原理
前端·react.js·面试
不甜情歌16 小时前
搞懂 Promise:告别回调嵌套,再也不怕异步代码乱成麻
前端·javascript
野草arthas17 小时前
什么是视觉层次?为什么需要它?
前端
发现一只大呆瓜17 小时前
React-手把手带你实现 Keep-Alive 效果
前端·react.js·面试
酉鬼女又兒17 小时前
入门前端CSS 媒体查询全解析:从入门到精通,打造完美响应式布局(可用于备赛蓝桥杯Web应用开发)
前端·css·职场和发展·蓝桥杯·前端框架·html5·媒体