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*/
}
相关推荐
VimorphTech几秒前
一段字幕太长,怎样拆句并安排显示时间?
java·spring boot
万联WANFLOW1 分钟前
Kimi K3.1 Pro 接口接入指南:模型选型、费用计算与零数据保留
java·spring boot·python·安全·spring·大模型
mantou1324 分钟前
从纯 CSR 到 SSR:用 WebComponents 做一个 Next.js 式框架 Gemkit
前端·全栈·web components
cidy_986 分钟前
深度拆解任务工作台架构:左右分栏、队列管理、实时刷新全方案
前端
Linye8 分钟前
告别“PRD 与原型两张皮”!我们把可交互原生组件直接嵌进了需求文档,还能双向回写 Markdown
前端
deli0079 分钟前
RSA 为什么公开公钥也解不开?2 个质数拆开实测一遍
前端
ModyQyW9 分钟前
vite-plugin-uni-pages 0.6:统一扫描规则,开发期少重启
前端·uni-app
织码weavecodes14 分钟前
新闻资讯模块设计:内容发布、阅读计数与附件鉴权
java·服务器·数据库
门思科技14 分钟前
把 ThinkLink 接进 Home Assistant 与 Node-RED:一条 MQTT 转发器能走通的路
前端
学到老活到老19 分钟前
Spring 事务怎样生效?为什么加了 @Transactional 仍不回滚?
java·spring