记一个微信公众号开发h5遇到的样式问题

效果如图：

解读一下，就是发布成功之后，在移动设备上，发现底部有一条透明的区域，不规则，不固定，安卓设备使用全面屏手势就会出现。更改虚拟按键（常规的屏幕返回键，home键）模式就不可见。

一：以为是设备兼容的问题，底部内边距之类的东西

尝试把底部抬高，以为是类似于ios设备下方的安全区，采取抬高的方式试一下，未果。无论底部如何调高，这个东西都在原地不动

兼容ios底部安全区做法：
vue适配全面屏底部安全区

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>

#app {
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
}

二：仔细看看图，发现这块区域的背景不就和我页面顶部的背景图是一个嘛！破案了！

把背景图重复方式改为不重复就解决了

总结：

在微信中，大概是预留了底部这么一块手势操作的区域，是透明的，这块区域不属于你的项目，所以他是透明的，但是他依旧属于这个页面，页面背景就会进行重复，所以底部就会看到和我顶部一样的背景图。
这是两部分！！！！！