有效解決移動端虛擬鍵盤影響fixed定位問題

看下圖（demo），讓我們心中有個概念，類似圖中的佈局--頁面有個輸入框，底部有個按鈕，這樣的佈局很常見，比如支付頁面，留言頁面等，一般我們會把按鈕fixed定位到頁面底部，但是隨之也產生了問題--當我們點選輸入框的時候會調起虛擬鍵盤，然後我們的按鈕被頂上去了。

起初想法：我們可以在input框聚焦和失焦的時候，對按鈕進行操作，比如顯示/隱藏；

於是寫了個demo做測試，感覺沒有什麼問題，沾沾自喜（too young too naive），然後發現虛擬鍵盤有自帶的收起功能，點選後input仍然處於聚焦狀態，看來還需要另尋其他解決方法。

之後想法：可以通過視口的高度變化做相應處理，不廢話，直接上解決方法程式碼：

var height = window.innerHeight;
複製程式碼

這句程式碼是獲取當前視口的高度，當虛擬鍵盤被調起後，該高度也會變化；

window.addEventListener('resize', function(){
	if(window.innerHeight < height){
		// 寫你自己的邏輯
	}
});
複製程式碼

為止有效的解決了fixed定位元素被虛擬鍵盤頂上去的尷尬。

路漫漫其修遠兮...

歡迎各位瀏覽我的部落格，分享前端路上的經驗。