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*/
}
相关推荐
hai_android9 分钟前
Android 设备锁定:Kiosk Mode 实战
android·java·android jetpack
ai工具集合10 分钟前
前端项目图标管理实战:成套图标集的选型、规范与 SVG 落地方案
前端
এ慕ོ冬℘゜16 分钟前
es6理论总结
前端·javascript·es6
张伯毅16 分钟前
External Shuffle Service(spark3_shuffle):原理、配置与排障
java·开发语言·spark·yarn
Liu.77433 分钟前
uniapp scroll-view 常见问题及修复
uni-app
Java后端的Ai之路35 分钟前
前端框架Vue-07_原生的Vue.js
前端·vue.js·前端框架
帆张芳显40 分钟前
前端表格公式能力新选择|智表 ZCell 公式引擎深度剖析
前端·excel·canva可画·excel插件
high一马平川40 分钟前
# SystemUI Dagger2 精读 · 第 2 章 @Inject:1200 处构造注入,和 1 处例外
android·java·kotlin
清水迎朝阳41 分钟前
Edge 在线语音 403 问题修复
前端·edge
小陈从不会敲代码42 分钟前
JavaEE面试复习(多线程-初阶)
java·面试·java-ee