苹果刘海全面屏底部留白问题解决（viewport-fit=cover）

在meta标签设置viewport-fit=cover，页面就会填充整个刘海区域（前提是浏览器或套页面的app必须做了iphonex的兼容）。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

如果上面属性设置之后，再把html,boby高度设置成100% 发现底部出现空白没有填满，这主要是这里的100%，只是安全区域的高度，是不包含非安全区域的。要使页面元素（如：iframe）满屏， 就要把html,body高度设置成 812px(包含非安全区域)。css兼容如下：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
html,body{height: 812px;}
}

更多参考：关于H5页面在iPhoneX适配（转） - 孙首富 - 博客园

H5页面适配 iPhoneX，就是这么简单_大熊的博客-CSDN博客_h5适配iphonex