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

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

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

相关推荐
花菜会噎住5 分钟前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js
花菜会噎住29 分钟前
Vue3核心语法基础
前端·javascript·vue.js·前端框架
全宝29 分钟前
echarts5实现地图过渡动画
前端·javascript·echarts
vjmap29 分钟前
MCP协议:CAD地图应用的AI智能化解决方案(唯杰地图MCP)
前端·人工智能·gis
simple_lau1 小时前
鸿蒙设备如何与低功耗蓝牙设备通讯
前端
啃火龙果的兔子2 小时前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
ttyyttemo2 小时前
Compose生命周期---Lifecycle of composables
前端
以身入局2 小时前
FragmentManager 之 addToBackStack 作用
前端·面试
sophie旭2 小时前
《深入浅出react》总结之 10.7 scheduler 异步调度原理
前端·react.js·源码
练习前端两年半2 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js