两步实现h5在ios刘海屏的样式兼容

h5在ios刘海屏的样式兼容

未修改之前的页面：

一、html页面头部添加viewport-fit=cover

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

加viewport-fit=cover之后：

二、css设置上下间距

/* 首页-头部刘海屏兼容设置 */
.indexPage{
  padding-top: .24rem;
  padding-top: calc(~'constant(safe-area-inset-top) + .24rem');
  padding-top: calc(~'env(safe-area-inset-top) + .24rem');
}

/* 底部菜单栏-底部间距设置 */
.menuBar{
  height: 0.98rem;
  height: calc(~'constant(safe-area-inset-bottom) + 0.98rem');
  height: calc(~'env(safe-area-inset-bottom) + 0.98rem');
}

加了css样式兼容之后：

注：
1、css兼容可根据实际布局添加padding，height，margin等样式；
2、如果支持上下滚动的容器顶部设置了padding，那底部也应该设置相应的padding，不然会导致内容底部显示不全。