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

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

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

相关推荐
没头脑和不高兴y4 小时前
Element-Plus-X:基于Vue 3的AI交互组件库
前端·javascript
ErMao4 小时前
Proxy 与 Reflect:最硬核、最实用的解释
前端·javascript
N***73854 小时前
前端路由权限动态更新,Vue与React实现
前端·vue.js·react.js
xiaoxue..4 小时前
用 Node.js 手动搭建 HTTP 服务器:从零开始的 Web 开发之旅!
服务器·前端·http·node.js
华仔啊4 小时前
Vue3图片放大镜从原理到实现,电商级细节展示方案
前端·vue.js·canvas
宇余4 小时前
Unibest开发避坑指南:20+常见问题与解决方案
前端·vue.js
在逃的吗喽4 小时前
Spring Boot的web基础配置
前端·spring boot
玲小珑4 小时前
LangChain.js 完全开发手册(十九)前端 AI 开发进阶技巧
前端·langchain·ai编程
哆啦A梦15884 小时前
46 修改购物车数据
前端·vue.js·node.js
程序员ys5 小时前
Vue的响应式系统是怎么实现的
前端·javascript·vue.js