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

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

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

相关推荐
风骏时光牛马11 分钟前
C语言核心高频问题与代码实战梳理
前端
葬送的代码人生19 分钟前
别再「Ctrl+C/V」了!Git 开发必备技能,10 分钟告别单机码农
前端·github·代码规范
xuankuxiaoyao20 分钟前
vue.js 设计与开发 ---路由
前端·javascript·vue.js
ZC跨境爬虫23 分钟前
跟着 MDN 学CSS day_6:(伪类和伪元素详解)
前端·javascript·css·数据库·ui·html
idcu24 分钟前
Lyt.js + Vite 快速开发指南
前端·typescript
暗不需求24 分钟前
玩转 React Hooks:从基础到实战,逐行解析带你彻底掌握
前端·react.js·面试
一颗小青松26 分钟前
css 文字区域根据图片形状显示,根据文字设置背景图
前端·css
阿黎梨梨27 分钟前
跟 Git 打交道的正确姿势
前端
idcu27 分钟前
深入 Lyt.js 路由系统:L6 生态系统层的核心
前端·typescript
idcu27 分钟前
用 Lyt.js 构建 Todo 应用:完整教程
前端·typescript