?

問題說明：

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上微信在输入框弹出键盘后，页面不恢复，下方有留白，有弹窗弹出时页面内容感应区域错位...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。