Taro 安全区域

目录

一、问题描述

二、问题解决

1、顶部刘海区

2、底部小黑条


一、问题描述

安全区域主要是为了避免刘海屏或底部栏遮挡,而造成的不良显示效果。

本次将针对以下两点进行考量:

1、顶部刘海屏区

2、苹果X底部小黑条

二、问题解决

通过Taro.getSystemInfoSync()方法可以获取到设备的信息,虽然其他api也有类似效果,但这个api兼容性是最好的,推荐使用。

1、顶部刘海区

getSystemInfoSync.Result.safeAera.top

这就是刘海屏上方刘海的高度,给容器设置对应的paddingTop即可。

2、底部小黑条

这个区域在苹果X这类手机上比较常见,解决方案是获取到以下计算后到值:

getSystemInfoSync.Result.screenHeight - getSystemInfoSync.Result.safeAera.bottom

这个差值就是屏幕最下方需要留到空间,当这两个值相同时,此时的设备是没有小黑条的,有小黑条的设备都存在此差值。

以上就是安全区域的解决方案!

相关推荐
橙子家3 分钟前
简单介绍下 Vue 2.x 中的几种生命周期钩子(Lifecycle Hooks)
前端
优雅的落幕15 分钟前
从零开始的抽奖系统创作(2)
java·服务器·前端
BillKu18 分钟前
Vue3 scoped样式使用通配符 * 的影响分析
前端·javascript·vue.js
肥肠可耐的西西公主25 分钟前
前端(小程序)学习笔记(CLASS 1):组件
笔记·学习·小程序
liangshanbo12151 小时前
CSS attr() 函数详解
前端·css
汇匠源1 小时前
Spring Boot + +小程序, 快速开发零工市场小程序
spring boot·后端·小程序
说私域2 小时前
心联网(社群经济)视角下开源AI智能名片、链动2+1模式与S2B2C商城小程序源码的协同创新研究
人工智能·小程序·开源·零售
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Hidden Search Widget (交互式搜索框)
前端·javascript·vue.js·ecmascript·tailwindcss
喜欢你的名字和你笑的样子2 小时前
前端跨域问题,后端解决方案
前端
Allen Bright2 小时前
【HTML-2】HTML 标题标签:构建网页结构的基础
前端·html