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

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

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

相关推荐
景彡先生7 小时前
Python基础语法规范详解:缩进、注释与代码可读性
开发语言·前端·python
蓝创精英团队7 小时前
C++DirectX9坐标系与基本图元之渲染状态(RenderState)_0304
前端·c++·性能优化
一天睡25小时7 小时前
想偷卷?但微信不支持md文档?这个软件助你!
前端·javascript
艾小码7 小时前
3个技巧让你彻底搞懂JavaScript异步编程
前端·javascript
Hy行者勇哥7 小时前
仪表盘设计技术全解析:从前端框架到工业物联网场景的多维度选型指南
物联网·前端框架
Y425811 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
速易达网络14 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou14 小时前
js前端this指向规则
开发语言·前端·javascript
lichong95114 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++