iphone 12 pro max 吸底元素随滚动时出现空白区域解决方案

2021-09-23 258 阅读1分钟

现附上问题图：

可以看到，当滑到底部的时候，原本吸底的元素被拉上去了。解决方案是meta中加入viewport-fit=cover", fixed的元素加上`padding-bottom: constant(safe-area-inset-bottom);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .class1 {
        position: relative;
        background-color: #e4e4e4;
        height: 100vh;
      }
      .class2 {
        height: 100px;
        background-color: red;
        position: fixed;
        bottom: 0px;
        width: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
      }
    </style>
  </head>

  <body>
    <div class="class1">
      <div class="class2"></div>
    </div>
  </body>
</html>

iphone 12 pro max 吸底元素随滚动时出现空白区域解决方案

完