H5适配iphoneX底部(只需2步)

首先我们要明白
iphoneX底部适配是要和H5页面的底部选项卡做兼容
所以我们要判断在iphoneX下
把选项卡底部到屏幕底部的中间部分自动填充

1.设置meta属性,在content下设置关键值 viewport-fit=cover

<meta name="viewport" content="viewport-fit=cover" />

2.底部选项卡判断(以下是关键步骤,其他样式省略)

// 设置固定定位,将bottom设置为0
.footerBox {
	position:fixed;
	bottom: 0;
}
// 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部
@supports (bottom: env(safe-area-inset-bottom)) {
	.footerBox {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

以上介绍了iphoneX的底部圆角区域填充适配最简方案
如果有更多想了解的请参考以下连接:

H5页面适配 iPhoneX
适应性和布局