微信瀏覽器軟鍵盤彈出與頁面resize的問題

　　使用微信打開網頁，彈出軟鍵盤時遇到的兼容問題

　　過去開發中遇到過不少這種狀況，頁面底部須要固定定位一個按鈕，廣告欄或者菜單欄，頁面中有表單項須要填寫，在打開手機虛擬鍵盤的時候，底部固定定位的元素會處在軟鍵盤上方，把原本就所剩無幾的頁面幾乎都擋住了（通常發生在不使用框架的單獨頁面中），而瀏覽器並無爲開發者提供呼出軟鍵盤的事件監聽方法。

　　以前個人解決方法是

 

window.onresize = function(){
    if(document.body.clientHeight<500){
         document.getElementById('底部元素id').style.display = 'none';
    }else{
         if(document.getElementById('底部元素id').style.display == 'none'){
               document.getElementById('底部元素id').style.display = 'block';
         }
    }
}

　　

　　當用戶呼出軟鍵盤時，頁面會觸發resize事件，頁面大小變小，高度只有原有高度減去鍵盤高度的高度，通常都小於500，

同時市面上也幾乎沒有屏幕原有高度就小於500的手機，因此在resize觸發後判斷，若是document.body.clientHeight<500

即視爲呼出軟鍵盤，此時能夠隨意處理礙眼的元素了，只是要記得鍵盤收回後能一切復原就行。

 

　　可是如今使用微信瀏覽分享網頁或者掃碼查看網頁的狀況愈來愈廣泛，而在微信中這個方法卻行不通了。

準確地說，是狀況變得不穩定，安卓手機還正常，可是在ios中，正常的情景是：

　　點擊輸入框-彈出軟鍵盤-底部元素自動處在鍵盤下方被覆蓋(這是未做任何處理的狀況，能夠說已經解決了問題)，

　　惋惜會有必定的概率出現底部元素跑到鍵盤上方遮擋其餘元素的狀況。而我上面的代碼則徹底沒有響應，底部元素並無隱藏。

　　在一番檢查以後發現了緣由，resize事件根本沒有被觸發。

　　咱們知道clientHeight指的是網頁可視區高度，呼出鍵盤它並無改變，也沒有將頁面頂上去，而是自動定位在了獲取焦點的表單元素上，虛擬鍵盤覆蓋在了原來的頁面上，因此clientHeight沒有改變，更不會小於500。

PS：經檢查，並非全部ios設備都存在此現象，目前發現的環境爲iphone7，微信內打開，輸入法不限。

　　android微信使用的是qq瀏覽器X5內核，關於此瀏覽器的更多兼容問題及解決辦法文章末尾會有轉載的連接供查閱，ios不容許使用其餘瀏覽器，用的應該是蘋果內核，可是ios高低版本之間還有差異，也多是safari版本不一樣形成的。這個問題在搞清楚緣由以後也很容易地找到了替代解決方法。

$('表單父元素').on('focus','input',function(){

    document.getElementById('底部元素').style.display = 'none';

})

$('表單父元素').on('blur','input',function(){

    document.getElementById('底部元素').style.display = 'block';

})

 

　　表單元素獲取焦點時隱藏底部元素，失去焦點時從新顯示。頁面比較簡單，因此這麼寫也沒什麼問題。

 

總結：

最新iphone微信內置瀏覽器中的虛擬鍵盤會覆蓋在原有頁面上，不會改變頁面可視區的大小。

彈出虛擬鍵盤時，獲取焦點元素會自動滾動到鍵盤上方的區域方便查看，可是由於這個緣由，當點擊頁面靠下的表單項時，

固定定位在底部的元素會有概率顯示在虛擬鍵盤區域上方遮蓋其它內容，在製做存在這種交互可能的產品時應多加註意。

 

qq瀏覽器X5內核常見問題

http://blog.csdn.net/kongjiea/article/details/49176153