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

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

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

相关推荐
加载中361几秒前
pnpm时代包版本不一致问题还是否存在
前端·面试·npm
老马啊老马1 分钟前
30 分钟搞定!Docker+Jenkins+Nginx + 腾讯云实现前端 CI/CD
前端
VillenK2 分钟前
用插件的方式注入Vue组件
前端·vue.js
掘金安东尼5 分钟前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
跟橙姐学代码15 分钟前
Python异常处理:告别程序崩溃,让代码更优雅!
前端·python·ipython
niuhuahua17 分钟前
大屏拖拽功能,配合ai组件使用,配合各个组件都可使用
前端
得物技术32 分钟前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
陶甜也35 分钟前
threeJS 实现开花的效果
前端·vue·blender·threejs
用户76787977373236 分钟前
后端转全栈之Next.js 路由系统App Router
前端·next.js
OEC小胖胖37 分钟前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js