使用微信打開網頁，彈出軟鍵盤時遇到的兼容問題
過去開發中遇到過很多這種情況，頁面底部需要固定定位一個按鈕，廣告欄或者菜單欄，頁面中有表單項需要填寫，在打開手機虛擬鍵盤的時候，底部固定定位的元素會處在軟鍵盤上方，把本來就所剩無幾的頁面幾乎都擋住了（一般發生在不使用框架的單獨頁面中），而瀏覽器並沒有為開發者提供呼出軟鍵盤的事件監聽方法。
之前我的解決方法是
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