解决原理:键盘弹出时,设置背景图下移;键盘关闭时,设置背景图复原
背景图的css
.login-bg img{width: 100%;object-fit:cover;position: fixed;bottom: 0;}
页面添加js监听事件
$(function () {//控制手机输入法弹出时,页面不会被顶起var height = document.documentElement.clientHeight || document.body.clientHeight;window.onresize = function() {var heightView = document.documentElement.clientHeight || document.body.clientHeight;console.log(heightView,height)//height是页面原始高度,heightView 是当前页面可视高度if(heightView < height) {//键盘弹出时$('.login-bg img').css('bottom',heightView-height+'px')console.log('下移')}else {//键盘收起时$('.login-bg img').css('bottom','0px')console.log('复原')}}})