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

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

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

相关推荐
钛态4 小时前
Vite 中的 CSS 工程化:从 CSS Modules 到 UnoCSS 的渐进式迁移
前端·vue·react·web
Csvn6 小时前
原型链、this 与闭包内存:三座深水区一次打通(含内存泄漏排查实战)
前端·javascript
葡萄城技术团队6 小时前
如何通过 JSON 数据源 / Web API 快速构建轻量级报表(Report)?
前端·json·原型模式
浪兎兎6 小时前
【Java Web】Servlet + JSP 笔记
java·前端·servlet
lhldsg7 小时前
家政派单系统开发实战:从需求分析到智能调度全流程指南
java·junit·小程序·uni-app·需求分析
Patrick_Wilson7 小时前
iOS Safari Clipboard API 权限弹窗问题
前端·ios·safari
OpenTiny社区8 小时前
Naive UI × GenUI SDK:自定义物料库搭建实战
前端·ai编程
kyriewen8 小时前
我拿 4 个真实前端任务试了 GLM-5.3 Flash:代码一遍跑通,账单 4 分钱
前端·程序员·ai编程
IT_陈寒8 小时前
Vue的响应式更新有时候真的不听话
前端·人工智能·后端
风骏时光牛马8 小时前
AI编程常见问题梳理与要点解析
前端