H5页面适配iphoneX以上底部小黑条遮盖内容

背景

  • iphone X 系列以上的H5 底部小黑条把内容遮盖

解决方案

  • 增加 viewport属性， viewport-fit = “cover”

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

  • 利用constant 函数，这个函数是ios11新增的css属性用于设定安全区域与边界的距离
    1）safe-area-inset-left 安全区域与左右上下的距离
    2）safe-area-inset-right
    3) safe-area-inset-top
    4) safe-area-inset-bottom

    1
    2
    3
    body{
      padding-bottom: constant(safe-area-inset-bottom)
    }

  • 对fixed元素的适配
    1）fixed 元素完全吸底
    i）通过增加内边距扩展高度

    1
    2
    3
    {
      padding-bottom: constant(safe-area-inset-bottom)
    }

    ii) 通过calc覆盖原来高度

    1
    2
    3
    {
      height: calc(30() + constant(safe-area-inset-bottom))
    }

    iii) 新增空白元素

    1
    2
    3
    4
    5
    6
    7
    {
      position: fixed;
      bottom: 0;
      height: constant(safe-area-inset-bottom);
      width: 100%;
      background: #fff;
    }

  • fixed 元素不完全吸底

    1） 通过外边距处理

    1
    2
    3
    {
      margin-bottom:constant(safe-area-inset-bottom);
    }

    2) 通过calc覆盖原来高度

    1
    2
    3
    {
      height: calc(20() + constant(safe-area-inset-bottom))
    }