项目中遇到了这个问题，说实话 iOS 端问题挺多的，原因找起来比较简单，就是吊起键盘的时候把window的高度挤小了，然后，
关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。
原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想，
页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接
解决方法很简单，让window滚动下就可以恢复window的高度了。
第一种方法，在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中
的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）
1. 非框架搭建的页面
const windowHeight = window.innerHeight
input.addEventListener(‘blur‘, function () {
let windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
return
}
console.log(windowHeight + ‘--‘ + windowFocusHeight);
console.log(‘修复‘);
let currentPosition;
let speed = 1; //页面滚动距离
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); //页面向上滚动
currentPosition += speed; //speed变量
window.scrollTo(0, currentPosition); //页面向下滚动
})
2. 因为经常用 vue 所以就写了全局指令，在输入框上加下就可以了，指令代码如下
const windowHeight = window.innerHeight
Vue.directive(‘fixedInput‘, function (el, binding) {
el.addEventListener(‘blur‘, function () {
let windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
return
}
console.log(windowHeight + ‘--‘ + windowFocusHeight);
console.log(‘修复‘);
let currentPosition;
let speed = 1; //页面滚动距离
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); //页面向上滚动
currentPosition += speed; //speed变量
window.scrollTo(0, currentPosition); //页面向下滚动
})
})
2. 监听window 的 resize 事件，当页面高度发生变化时滚动window，也就不用每个input都做处理了，但是有定时器，但凡有定时器的代码本人一般都不怎么用，
代码如下（按理也可以解决select 导致的底部留白）
const windowHeight = window.innerHeight
var windowScrollTimer = null
window.addEventListener(‘resize‘, function () {
console.log(windowHeight);
if (windowScrollTimer) {
return
}
let windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
return
}
windowScrollTimer = setInterval(() => {
windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
clearInterval(windowScrollTimer)
windowScrollTimer = null
return
}
console.log(windowHeight + ‘--‘ + windowFocusHeight);
console.log(‘修复‘);
fixInputBugs()
}, 100)
})
function fixInputBugs () {
let currentPosition;
let speed = 1; //页面滚动距离
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); //页面向上滚动
currentPosition += speed; //speed变量
window.scrollTo(0, currentPosition); //页面向下滚动
}
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
原文：https://www.cnblogs.com/blackbentel/p/10239886.html