微信小程序iPhoneX 底部虚拟Home键区域适配方案
为什么要适配?
先看下iPhoneX和之前的iPhone的区别,如下图
可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会导致:
- 内容被遮挡;
- 内容和虚拟Home键重叠而引起误操作;
因此,我们需要对iPhoneX进行一些必要的适配。
怎么适配?
因为我们要做的是微信小程序的适配,而我们开发的页面运行在微信里面,顶部空间微信已经做了适配,所以我们仅需对底部虚拟Home键区域进行适配即可(自定义导航例外)。
这里有两种情况:
- 底部无悬浮物件的情况
- 底部有悬浮物件的情况
底部无悬浮物件的情况
只要把页面内容容器的下内边距设置为虚拟Home键区域的高度即可。
底部有悬浮物件的情况
需把悬浮物件的下内边距设置为虚拟Home键区域的高度,并且页面内容容器的下内边距设置为悬浮物件的高度(原悬