移动端安全区域

发表于 |

移动端 h5 全屏内容，往往根据设备不同有安全区域的概念，特别是在 ios 设备尤为需要注意；以下总结了一个全屏内容的 h5 页面通用方案；

注意点：

  1. constant(safe-area-inset-bottom) 和 env(safe-area-inset-bottom) 对 bottom 属性无效，需要加载 padding-bottom 类似属性上。
  2. 100vh 是包含安全区域的，但是可视区不包含安全区域（虽然安全区域在可视区内），所以设置height 为 100vh 会触发页面滚动。
  3. 安全区如果没有被遮挡，显示的是 html-body 的背景色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
  <div class="my-page">
    <div class="body">
      <div class="content">body-content</div>
    </div>
    <div class="footer">footer</div>
  </div>
</template>

<script>
export default {
  name: 'myPage',
};
</script>

<style lang="less" scoped>
@footHeight: 48px;
@backgroundColor: #000;

.my-docs-page {
  height: 100vh;
  overflow: hidden;
  background-color: @backgroundColor;

  .body {
    height: calc(100vh - @footHeight);
    overflow: auto;

    .content {
      height: 2000px;
    }
  }

  .footer {
    height: @footHeight;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@supports (bottom: constant(safe-area-inset-bottom)) or
  (bottom: env(safe-area-inset-bottom)) {
  .my-page {
    height: calc(100vh - constant(safe-area-inset-bottom));
    height: calc(100vh - env(safe-area-inset-bottom));

    &::after {
      content: '';
      display: block;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: @backgroundColor;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .body {
      height: calc(100vh - @footHeight - constant(safe-area-inset-bottom));
      height: calc(100vh - @footHeight - env(safe-area-inset-bottom));
    }

    .footer {
      height: calc(@footHeight + constant(safe-area-inset-bottom));
      height: calc(@footHeight + env(safe-area-inset-bottom));
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>