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

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

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

相关推荐
浩宇软件开发8 分钟前
基于微信小程序的天气预报app
微信小程序·小程序·天气app
TE-茶叶蛋9 分钟前
React & Vue 编译/运行流程
前端·vue.js·react.js
kuiini14 分钟前
学习 React【Plan - June - Week 1】
前端·react.js
Hilaku16 分钟前
低代码是“未来”还是“骗局”?作为前端我被内耗到了
前端·javascript·低代码
陈_杨19 分钟前
鸿蒙5开发宝藏案例分享---内存优化实战指南
前端
陈_杨23 分钟前
鸿蒙5开发宝藏案例分享---Grid性能优化案例
前端
我想说一句23 分钟前
今天我又被JavaScript的this绑架了!🚨
前端·javascript·面试
Sun_light26 分钟前
AI代替大脑:用Trae助手开发颜色记忆小游戏全流程实录
前端·人工智能·html
薛定谔的算法27 分钟前
JavaScript基础核心:从变量声明到作用域的深度解析
前端
vortex528 分钟前
Yakit 热加载入门学习指南
java·服务器·前端