移动端页面如何兼容iphone底部的安全区域

正常情况下，当页面充满屏幕时，部分iphone底部黑条会遮挡页面内容（安卓手机上不存在这个问题）如下图：

但是其实我们想要实现的效果是这样的，不想让它遮挡内容：

这个要怎么兼容呢？

1、在样式中加入

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

2、在html的meta中加入viewport-fit=cover，小程序里的viewport-fit默认是cover

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

补充知识：

1、env()和constant()，是IOS11新增的特性，Webkit