微信小程序iPhoneX 底部虚拟Home键区域适配方案

微信小程序iPhoneX 底部虚拟Home键区域适配方案

为什么要适配？

先看下iPhoneX和之前的iPhone的区别，如下图

可以看出主要是顶部和底部多了一些区域，如果页面内容进入该区域，有可能会导致：

1. 内容被遮挡；
2. 内容和虚拟Home键重叠而引起误操作；

因此，我们需要对iPhoneX进行一些必要的适配。

怎么适配？

因为我们要做的是微信小程序的适配，而我们开发的页面运行在微信里面，顶部空间微信已经做了适配，所以我们仅需对底部虚拟Home键区域进行适配即可（自定义导航例外）。

这里有两种情况：

1. 底部无悬浮物件的情况
2. 底部有悬浮物件的情况

底部无悬浮物件的情况

只要把页面内容容器的下内边距设置为虚拟Home键区域的高度即可。

底部有悬浮物件的情况

需把悬浮物件的下内边距设置为虚拟Home键区域的高度，并且页面内容容器的下内边距设置为悬浮物件的高度（原悬浮物件高度+虚拟Home键区域高度）。

具体实现

• 虚拟Home键区域的高度：

  iOS11 的Webkit 的新增了一个 CSS env()