IOS上微信在输入框弹出键盘后，页面不恢复，下方有留白，有弹窗弹出时页面内容感应区域错位...

 

问题说明：

ios中，键盘的弹起，页面会往上挪动，使输入框展示在页面中间，键盘隐藏页面会下挪恢复原状。

在微信移动端，ios页面不恢复，下方有留白。

收起键盘的瞬间，如果有弹窗弹出，此时时页面内容应区域错位。

问题栗子配图：

 

解决方案：

其实只要知道了原因，坑填起来很简单：输入法的软键盘影响了页面的高度和位置。

我们重置页面位置起始位置为0，重置页面高度为初始高度。

 

核心代码：

window.scroll(0, 0); window.innerHeight = window.outerHeight = “页面之前高度”

 

 

全部代码：

<script> data () {return {screenHeight: '';} }, updated () {let that = this;this.$nextTick(function () {let $inputs = Array.from(document.getElementsByTagName('input'));/*let body = document.body;$inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略item.onblur = function () { // onblur是核心方法clearTimeout(body.timer);body.timer = setTimeout(() => {window.scroll(0, 0);window.innerHeight = window.outerHeight = that.screenHeight}, 150)}item.onfocus = function () {clearTimeout(body.timer)}})*/let body = document.body;$inputs.forEach(item => {item.onblur = function () { // onblur是核心方法window.scroll(0, 0);window.innerHeight = window.outerHeight = that.screenHeight}})}) }, mounted () {this.screenHeight = document.documentElement.clientHeight } </script> View Code

 

 

 tips：因为只有微信端ios有问题，这个是判断是否为微信浏览器的一段代码

window.onload = function() {isWeixinBrowser(); } //判断是否微信浏览器 function isWeixinBrowser() { var ua = navigator.userAgent.toLowerCase(); var result = (/micromessenger/.test(ua)) ? true : false;if (result) {console.log('你正在访问微信浏览器');}else {console.log('你访问的不是微信浏览器');}return result; }

 

转载于:https://www.cnblogs.com/ziChin/p/10278016.html

总结

以上是生活随笔为你收集整理的IOS上微信在输入框弹出键盘后，页面不恢复，下方有留白，有弹窗弹出时页面内容感应区域错位...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。