背景

公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题

原因

在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题

解决方案

使用已知底部小黑条高度为34px/68rpx机型适配(不建议)
使用微信官方API，getSystemInfo()中的safeArea对象进行适配（建议）
使用苹果官方推出的css函数env()、constant()来适配（建议）

安全区域

看看图就明白了，中间绿色区域即为安全区域。也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。

#第一种，使用已知安全距离进行适配34px/68rpx(不建议)
小程序app.js文件中判断获取当前设备机型，如果是iphoneX系列机型，那么设计到底部时，则考虑设置底部按钮或选项卡的margin-bottom、padding-bottom、height等，或者添加一个div来占位小黑条的位置。
#第二种 getSystemInfo()

1 使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
这里使用screenHeight是获取屏幕的高度，因为bottom是以屏幕左上角为原点开始计算的，所以需要的是屏幕高度，对比screenHeight和safeArea，如果相等则说明不需要适配，不相等则需要适配。
`const isIPhoneX = () => {

let screenHeight = wx.getSystemInfoSync().screenHeight

let bottom = wx.getSystemInfoSync().safeArea.bottom

return screenHeight !== bottom

}###注意 isIPhoneX 返回true则代表不想等，需要进行适配底部选项卡或吸底元素样式判断底部选项卡或吸底元素`

2 safeArea对象获取底部小黑条的高度,全局存储使用

#第三种使用苹果官方推出的css函数env()、constant()来适配（建议）我也用的这种
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
- safe-area-inset-left：安全区域距离左边边界的距离
- safe-area-inset-right：安全区域距离右边边界的距离
- safe-area-inset-top：安全区域距离顶部边界的距离
- safe-area-inset-bottom ：安全距离底部边界的距离

这里我们只需要关注safe-area-inset-bottom就行了

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover

使用案列

下图为一个吸底元素，在iphoneX真机上小黑条会遮挡，大概长这样
解决方案
`.detailBotoom{

position: fixed;

bottom: 0;

width: 100%;

display: flex;

height: calc(96rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/

height: calc(96rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/

background: #fff;

border-top: 1rpx solid #eaeef1;

z-index: 99;

padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/

padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/

注意 constant与env顺序不能改变，先constant再env

iphoneX底部小黑条适配问题相关推荐

H5页面适配iphoneX底部小黑条遮盖内容
iphoneX取消了物理按键,改为底部小黑条,这也在页面开发的过程中,会出现底部内容被小黑条遮盖的现象,影响页面效果, 我们可以这也解决 1:增加viewport属性 viewport-fit=&qu ...
微信小程序适配iPhoneX底部小黑条
微信小程序适配 iPhone X 底部小黑条一.在 app.js 中获取到设备信息 getSystemInfo 获取设备信息,然后将底部距离保存到 globalData 中方便页面读取当然如果项目 ...
vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条
场景由于iPhoneX去掉了物理按键,改为了底部小黑条,这就会导致屏幕适配问题,最常见的场景就是底部fixed的元素被阻挡的情况.对于这种问题,我们一般采取css或js的处理方式(适用于h5,小程序 ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
微信小程序 iPhoneX 底部安全区域适配
1.问题微信小程序的tabbar会被iPhoneX 底部小黑条覆盖 2.解决方案 (1)获取手机型号,单独处理样式(底部小黑条大约为68rpx) (2)实现铺满全屏效果 (3)具体代码 app.js ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
1分钟解决微信小程序 iPhone 11、iPhoneX 底部安全区域（底部小黑条）适配
[最新:目前微信官方已适配iPhone11手机型号,分别为:iPhone 11,iPhone 11 Pro Max] iPhone X 对于微信小程序的tabbar来说,会被底部小黑条覆盖,需要处 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
H5移动端网页适配iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 机型底部小黑条
iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部 ...

iphoneX底部小黑条适配问题

背景

原因

解决方案

安全区域

这里我们只需要关注safe-area-inset-bottom就行了

注意 constant与env顺序不能改变，先constant再env

iphoneX底部小黑条适配问题相关推荐

最新文章

热门文章