微信小程序中position:fixed；bottom:0，在iphoneX中被遮住的问题

问题的描述：

env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

可以通过加内边距 padding 扩展高度：

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

或者通过计算函数 calc 覆盖原来高度：

height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));

解决方案

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