H5单页应用适配IOS留海屏和底部黑条

解决方案

将以下代码复制添加至入口文件index.html中，可以解决IOS留海遮挡页面顶部的适配问题。

<!-- index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<style>
  #app {
     
     
    /* 自定义预留顶部高度 */
    --top: 20px;
    /* 自定义预留底部高度 */
    --bottom: 0px;
    
    /* 适配留海，降级方案 */
    padding-top: var(--top); /* 兼容非刘海屏 */
    padding-top: calc(constant(safe-area-inset-bottom) + var(--top)); /* 标准留海屏 */
    padding-top: calc(env(safe-area-inset-bottom) + var(--top)); /* 兼容 ios11 */

    /* 适配底部黑条，降级方案 */
    padding-bottom: var(--bottom);
    padding-bottom: calc(constant(safe-area-inset-bottom) + var(--bottom));
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--bottom));
  }
</style>

安全区域safe-area-inset-*

MDN是如此解释的：

最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

总共有四个安全区域距离值：

• 上安全距离: safe-area-inset-top
• 右安全距离: safe-area-inset-right
• 下安全距离: safe-area-inset-bottom
• 左安全距离: safe-area-inset-left