iPhoneX安全区域(SafeArea)底部小黑条在微信小程序和H5的屏幕适配_iphone底部安全区 - CSDN文库

微信小程序

46 浏览量更新于2023-05-03 评论收藏 193KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

iPhoneX安全区域安全区域(Safe Area)底部小黑条在微信小程序和底部小黑条在微信小程序和H5的屏幕适配的屏幕适配

最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总

结总结。

前言前言

在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到

底部按钮或选项卡栏与底部黑线重叠的情况，如下图。

1. 安全区域是什么意思？安全区域是什么意思？

想要解决内容与小黑线重叠的问题，我们需要先了解清楚苹果对于安全区域的定义。

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

看看苹果官方给的这2张图就明白了，中间蓝色区域即为安全区域。也就是说，适配安全区域也就是让小程序或者H5的内容显示在蓝色区域部分。

同时安全区域是在IOS11之后并且是iPhoneX及以上机型才有的，所以需要适配的是这一类机型（为了方便，下文中统称这类需要适配的机型为iPhoneX），更老的机型则不需

要考虑适配问题。

2. 在微信小程序上适配安全区域在微信小程序上适配安全区域

三种方案：

使用已知底部小黑条高度34px/68rpx来适配（不推荐）

使用微信官方API，getSystemInfo()中的safeArea对象进行适配（推荐）

使用苹果官方推出的css函数env()、constant()适配（推荐）函数env()、constant()适配（推荐）的css函数env()、constant()适配（推荐）

方案一：使用已知底部小黑条高度34px/68rpx来适配（不推荐）

这是比较老的方法，跟方案2、3比已经不推荐了，大家可以了解了解，着急可以直接看方案2和3。

从网上了解到，iPhone底部的小黑条（Home Indicator）高度是34px，实际我也在真机确认了是34px，所以可以根据该值，设置底部按钮或选项卡的margin-bottom、padding-

bottom、height等，或者添加一个div来占位小黑条的位置。

这样做要有一个前提，需要判断当前机型是需要适配安全区域的机型。

问题：如何判断当前机型是需要适配安全区域问题：如何判断当前机型是需要适配安全区域

2种方案：

使用wx.getSystemInfoSync()的model属性判断

使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

方法一：方法一：使用wx.getSystemInfoSync()的model属性判断

已知市面上已有的带安全区域的苹果设备包括iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max，所以可以直接从

getSystemInfoSync()方法中拿到model属性进行判断。iPhone系列微信还未适配手机的model返回值为unknown(iphone)，也可以提前做适配。

let IPHONE_X = /iphone x/i

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38718262

粉丝: 7
资源: 950

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈