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*/
}
相关推荐
搬砖的小码农_Sky14 分钟前
AI Agent:Windows上Node.js安装后 npm -v报错
前端·npm·node.js·人机交互
Zhou14113619 分钟前
SpringBoot_02_自动配置原理
java·spring boot·后端
FYKJ_201026 分钟前
SSM校园失物招领系统41452-计算机课程设计、毕业设计
java·vue.js·spring boot·python·mysql·typescript·spark
kv11030 分钟前
Android studio国内开发有关
java·数据库·android studio
计算机魔术师34 分钟前
半年翻倍!OpenAI再融300亿,估值冲到1.4万亿
前端
卓怡学长1 小时前
w198基于springboot始于足下健康打卡平台的设计与实现
java·spring boot·spring·intellij-idea
研☆香1 小时前
jQuery + Swiper.js 实现动态渲染轮播图
前端·javascript·jquery
阿狗童鞋1 小时前
Java并发编程实战指南
java·开发语言
子兮曰1 小时前
Node.js 50个优势场景盘点:一个人单干,为啥我多数时候只用它
前端·后端
IT_陈寒1 小时前
我花3小时debug,就因为JavaScript这个隐式转换坑
前端·人工智能·后端