缘起
项目中遇到了这个问题，说实话 iOS 端问题挺多的，原因找起来比较简单，就是换起键盘的时候把window的高度挤小了，然后，关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。
原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想，
页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接： ios软键盘顶起页面后隐藏不回弹解决方案
性空
解决方法很简单，让window滚动下就可以恢复window的高度了。
在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中
的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）, 解决方案如下：
一，新建全局的 混入 js 插件: fixedInput.js
export default {
// 修复 ios 微信 input 失去焦点 留白的问题
data () {
return {
windowHeight: 0,
};
},
mounted() {
this.windowHeight = window.innerHeight;
},
updated() {
this.repairBlur();
},
methods: {
repairBlur() {
let ua = navigator.userAgent;
//判断是否是ios设备
if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
// 解决ios输入框弹出的页面样式问题
document.querySelectorAll("input").forEach(item => {
item.onblur = this.temporaryRepair;
});
document.querySelectorAll("select").forEach(item => {
item.onchange = this.temporaryRepair;
});
document.querySelectorAll("textarea").forEach(item => {
item.onblur = this.temporaryRepair;
});
}
},
temporaryRepair() {
let windowFocusHeight = window.innerHeight
if (this.windowHeight == windowFocusHeight) {
return;
}
console.log(this.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); //页面向下滚动
},
}
}
第二， 在main.js 或者 在 有bug 的组件内引入即可 （本人采用全局混入方式）：
全局混入方式：
// mixin 全局混入方法
import mixin from "./assets/js/fixedInput.js";
Vue.mixin(mixin);
有bug页面引入方式
import fixedInput from '@/assets/js/fixedInput';
export default {
……
mixins: [fixedInput],
……
}
