H5页面 底部留白 安全间距

前言

提示：这个底部留白是 安全间距：

方案一：

找到 public 文件夹 下面的 index.html 然后在 meta 标签中 加入

viewport-fit=cover

如下：

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

在适配手机型号的时候，能够自动补齐安全区域（safe area）以后的区域，这样我们下拉的时候，就不会漏出去了

方案二

其实是运用了css的constant（）函数，能够对非安全区域进行高度的设置；

		body {
           padding-top: constant(safe-area-inset-top);
           padding-left: constant(safe-area-inset-left);
           padding-right: constant(safe-area-inset-right);
           padding-bottom: constant(safe-area-inset-bottom);
       }
1
2
3
4
5
6

主要是: padding-bottom

参考文章