移动端页面背景图问题

最近在维护一个移动端项目，发现在手机高度过高的手机上例如：iphonex，在设置背景图的时候不会自动填满整个屏幕，针对这个问题进行了几个尝试。
1.background-size:cover,
这个可以把背景图片全部展开，但是会在底部留下白屏，这样用户体验很差。
2.vh方案
这个方案可以实现全屏，但是BUG也很明显，软键盘弹出后会出现背景图缩小的BUG，因为vh方案是以视口的高度进行计算，软键盘会影响视口的高度，所以这个方案放在注册登陆页面并不可行。
3.写死高度
这个可行，但是需要进行多端适配，很麻烦，维护很麻烦。
4.Rem和百分比
REM方案可行，但依然需要多端适配。最终使用了百分比和背景颜色叠加的方式，由于背景图片是黑色，这样用户不会看出明显的bug,启发来自某度APP。

小结：这个应该不是最佳的解决的方案，但是应该是最适合这个场景的方案了，移动端这方面也刚刚接触，还有许多坑需要踩。第一天在CSDN发文章，希望自己坚持记录自己学习到的东西。

附赠：淘宝REM动态方案：https://github.com/amfe/lib-flexible
vw vh 在 vue的适用场景：https://www.w3cplus.com/mobile/vw-layout-in-vue.html