移動端 IOS的兩個小坑

最近由於項目須要，要在微信端作幾個簡單的頁面。雖然頁面比較簡單，可是也在iOS 的適配上發現了兩個小坑。但願經過這篇文章來記錄下這兩個問題的解決方案，也但願能幫到你們。

1. IOS 12 驗證碼bug

IOS 12新增了一個功能，就是收到短信驗證碼以後能夠自動填充。可是會有一個bug,就是會自動填充兩次（以下圖）。

對於這個bug目前暫時是沒有完美的解決方案的。暫時的解決方案就是限制輸入框的長度。例如是4位驗證碼的話，驗證碼的輸入框就限定最大長度爲4位，若是是6位驗證碼就限定最大長度爲6位。

2.IOS 微信瀏覽器兼容bug

目前ios 存在一個bug就是在文本框輸入內容，輸入完成之後收起軟鍵盤後，頁面的高度不能恢復。可能提及來比較抽象，具體的問題能夠看下圖：

這是一個簡單的小demo,具體的問題大概就是這個樣子。而對於這個問題的解決思路也很簡單，監聽每一個輸入框的blur事件，而後經過window.scroll()將頁面進行校準。具體的代碼以下(因爲我用的是vue,用原生js或者jquery的可自行修改一下代碼)：

//判斷是否微信瀏覽器
isWeixinBrowser:function(){
    let ua = navigator.userAgent.toLowerCase();
    this.isWeixin = (/micromessenger/.test(ua)) ? true : false;
},
//ios bug修復
scrollTo:function(){
    if(!this.isWeixin) {
	    return;
    }
    window.scroll(0, 0);
}
複製代碼