最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。
本文目录
前言
· 内容与小黑线重叠情况说明
1.安全区域含义
2.微信小程序适配iPhoneX底部小黑条(Home Indicator)
(1)适配方案一:使用已知底部小黑条高度34px/68rpx来适配(不推荐)
(2)适配方案二:使用微信官方API,getSystemInfo()中的safeArea对象进行适配(推荐)
(3)适配方案三:使用苹果官方推出的css函数env()、constant()来适配 (推荐)
3.H5适配iPhoneX底部小黑条(Home Indicator)
· 适配方案:使用苹果官方推出的css函数env()、constant()来适配 (推荐)
前言
在苹果 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()适配(推荐)