概述:本篇文章针对H5页面开发中键盘弹起,页面使用背景图,屏幕可视高度变小,遇到的不同设备的兼容性问题(安卓键盘弹弹出背景被压缩的问题以及苹果手机底部留白问题)
1,单独设置一个div用来存放页面背景

2,当前div设置如图所示
.page_bg{
position: fixed; /* 固定定位,相对于浏览器窗口 */
top: 0;
left: 0;
width: 100%;
height: 100%; /* 关键:这里的高度是视口高度 */
/* 针对 iOS 的兜底:强制最小高度为屏幕物理高度 */
min-height: 100vh;
background: url('~@/assets/img/home/loginOrRegister/wechat_bg.png') no-repeat;
background-size: cover;
z-index: -1; /* 放在最底层 */
}
3,同时也要注意父级标签的设置:
一般简单设置这些即可

如果还不行可以试试添加如下方案
输入框聚焦的时候也就是键盘弹起的时候不要更新页面高度
记录一下初始高度

页面中父级标签使用如下这些配置即可
