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

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);
    }
}

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