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 小时前
老梁聊全栈:CSS3 高级特性—Flex/Grid 布局体系深度解析
前端·css3·布局·flexbox·grid·工程实践·全栈工程师
io无心6 小时前
基于Image 2的多配件商品图生成技术实现(已开源)
java·image2
逢君学术论文AI写作6 小时前
Java第22课:Servlet获取请求参数+POST请求+表单交互
java·servlet·ai写作
神明不懂浪漫6 小时前
【第二章】Java中的数据类型,运算符与程序逻辑控制
java·开发语言·经验分享·笔记
小马爱打代码6 小时前
Java 开发:过滤器(Filter)与拦截器(Interceptor)深度解析 + CORS 跨域完整解决方案
java
IT_陈寒6 小时前
Python虚拟环境的这个坑,我居然绕了三天才爬出来
前端·人工智能·后端
我登哥MVP6 小时前
SpringCloud 核心组件解析:服务熔断和降级
java·spring boot·后端·spring·spring cloud·java-ee·maven
霸道流氓气质6 小时前
Spring AI Alibaba Graph 全解析:从入门到精通
java·人工智能·spring
摇滚侠6 小时前
SpringMVC 入门到实战 异常处理 83-85
java·后端·spring·maven·intellij-idea
星栈独行6 小时前
写 Makepad Demo 不难,难的是把它写成项目
前端·程序人生·ui·rust