在苹果手机上由于取消了物理Home键，改为底部小黑条替代home键功能。也就因此造成了在微信小程序和h5网页需要针对这种情况进行适配，否则可能会遇到底部设置的菜单与IOS系统的黑线重叠的情况，效果如图所示。

关于该问题的出现，苹果官方推出了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 ：安全距离底部边界的距离

案例演示-设置一个固定高度为110rpx模块，在屏幕底部。然后使用constant、env和不使用的情况下。在苹果手机上查看小程序演示效果，就可以看到在底部存在明显的安全距离问题，甚至会产生遮挡问题。

<view class="fixfooter">固定底部演示区域</view>
.fixfooter{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background:#f00;
	color:#fff;
	z-index: 999;
}

IOS官方推出的安全距离设置：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

将上述安全距离代码，进行设置即可查看效果。