全面屏到来之前，当下手机都是刘海屏和水滴屏，因此对前端开发增加了难度，为解决此问题，官方给出的解决适配ios11+的方案：
html5使用安全区域 safe-area-inset-* 适配ios齐刘海屏！-QUI-Notes

html5头部head的viewport-fit必须是cover模式

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

viewport-fit有效值
contain 可视化窗口完全包含网页内容
cover 网页内容完全覆盖
auto 默认值，效果如contain

css 预定义变量

  • safe-area-inset-left：安全区域距离左边边界距离，默认0px
  • safe-area-inset-right：安全区域距离右边边界距离，默认0px
  • safe-area-inset-top：安全区域距离顶部边界距离，默认44px
  • safe-area-inset-bottom：安全区域距离底部边界距离，默认34px

css 函数 env() 和 constant()

env 函数，必须在 ios > 11.2 才支持
constant 函数，必须 ios < 11.2 支持

完整兼容代码：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body{
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
}

这样就可以适配苹果手机的刘海屏了，问题来自 华为云移动全站开发——移动端适配简介，答案摘自思否专栏！