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*/
}
相关推荐
XiaoYu20023 分钟前
第2章 Nest.js入门
前端·ai编程·nestjs
xun-ming3 分钟前
JVM实战中5个核心概念
java
风筝在晴天搁浅4 分钟前
hot100 146.LRU缓存
java·缓存
没事多睡觉6669 分钟前
零基础React + TypeScript 教程
前端·react.js·typescript
liliangcsdn9 分钟前
MySQL存储字节类数据的方案示例
java·前端·数据库
lbb 小魔仙9 分钟前
【Java】Spring Cloud 核心组件详解:Eureka、Ribbon、Feign 与 Hystrix
java·spring cloud·eureka
_Kayo_11 分钟前
React useState setState之后获取到的数据一直是初始值
前端·javascript·react.js
予枫的编程笔记13 分钟前
从入门到精通:RabbitMQ全面解析与实战指南
java·开发语言·后端·rabbitmq·ruby
谷哥的小弟14 分钟前
HTML5新手练习项目—生命体征监测(附源码)
前端·源码·html5·项目
黎明初时14 分钟前
react基础框架搭建3-配置 Redux:react+router+redux+axios+Tailwind+webpack
前端·react.js·webpack