?

問(wèn)題說(shuō)明：

ios中，鍵盤(pán)的彈起，頁(yè)面會(huì)往上挪動(dòng)，使輸入框展示在頁(yè)面中間，鍵盤(pán)隱藏頁(yè)面會(huì)下挪恢復(fù)原狀。

在微信移動(dòng)端，ios頁(yè)面不恢復(fù)，下方有留白。

收起鍵盤(pán)的瞬間，如果有彈窗彈出，此時(shí)時(shí)頁(yè)面內(nèi)容應(yīng)區(qū)域錯(cuò)位。

問(wèn)題栗子配圖：

?

解決方案：

其實(shí)只要知道了原因，坑填起來(lái)很簡(jiǎn)單：輸入法的軟鍵盤(pán)影響了頁(yè)面的高度和位置。

我們重置頁(yè)面位置起始位置為0，重置頁(yè)面高度為初始高度。

?

核心代碼：

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

?

?

全部代碼：

<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 => { // 定時(shí)器是處理多個(gè)input間快速切換閃屏問(wèn)題，可省略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：因?yàn)橹挥形⑿哦薸os有問(wèn)題，這個(gè)是判斷是否為微信瀏覽器的一段代碼

window.onload = function() {isWeixinBrowser(); } //判斷是否微信瀏覽器 function isWeixinBrowser() { var ua = navigator.userAgent.toLowerCase(); var result = (/micromessenger/.test(ua)) ? true : false;if (result) {console.log('你正在訪問(wèn)微信瀏覽器');}else {console.log('你訪問(wèn)的不是微信瀏覽器');}return result; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/ziChin/p/10278016.html

總結(jié)

以上是生活随笔為你收集整理的IOS上微信在输入框弹出键盘后，页面不恢复，下方有留白，有弹窗弹出时页面内容感应区域错位...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。