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*/
}
相关推荐
冬夜戏雪6 小时前
实习面经摘录(六)
java
肉肉不吃 肉6 小时前
Vue Router 路由模式
前端·javascript·vue.js
北寻北爱6 小时前
Vue-Router
前端·javascript·vue.js
把你毕设抢过来6 小时前
基于Spring Boot的演唱会购票系统的设计与实现(源码+文档)
java·spring boot·后端
⑩-6 小时前
Redis内存淘汰策略?如何处理大Key?
java·数据库·redis
淡泊if6 小时前
eBPF 实战:一次诡异的 Nginx 高延迟,我用 5 分钟在内核里找到了真凶
java·运维·nginx·微服务·ebpf
肉肉不吃 肉6 小时前
什么是闭包
前端·javascript
窝子面6 小时前
十六、按钮组件
前端
天天向上10246 小时前
vue 页面内实现el-table和div自动滚动
前端·javascript·vue.js
李白的粉6 小时前
基于springboot的桂林旅游景点导游平台
java·spring boot·毕业设计·课程设计·源代码·桂林旅游景点导游平台