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

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

起初想法：咱們能夠在input框聚焦和失焦的時候，對按鈕進行操做，好比顯示/隱藏；

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

以後想法：能夠經過視口的高度變化作相應處理，不廢話，直接上解決方法代碼：

var height = window.innerHeight;
複製代碼

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

window.addEventListener('resize', function(){
	if(window.innerHeight < height){
		// 寫你本身的邏輯
	}
});
複製代碼

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

路漫漫其修遠兮...

歡迎各位瀏覽個人博客，分享前端路上的經驗。