手機軟鍵盤彈起致使頁面變形的一種解決方案

最近用 uniapp（一種第三方 app 開發框架） 開發 app，其中一個頁面有十幾個 input 輸入框，在點擊 input 輸入時，軟鍵盤彈起，致使頁面往上頂，底部的按鈕也所有彈到頁面上面去了，佈局全被打亂。

原來的樣子：

軟鍵盤彈出來後：

在開發APP時，一般狀況下頁面的寬度和高度都會設爲 100%，即頁面高度等於屏幕高度，頁面寬度等於屏幕寬度。 當 input 獲取焦點時，軟鍵盤彈出，頁面高度被擠壓，此時頁面高度 = 屏幕高度 - 軟鍵盤高度。因此，頁面高度縮小，元素都擠壓在一塊兒，佈局被打亂。

一種可行的解決方案：給頁面設置一個最小高度，即一個能讓全部元素按原來佈局排列的高度。

舉例：

我開發的 APP 運行在 ipad上，橫屏顯示時，高度爲 768px ，我能夠把 768px 當作頁面的最小高度。

.app {
	min-height: 768px;
	/* 原來定義的高度 100% */
	height: 100vh;
}
複製代碼

軟鍵盤仍是會彈起，由於頁面最小高度被設爲了 768px，因此此時總高度爲 768px + 軟鍵盤高度，超出了屏幕高度（ipad橫屏屏幕高度爲768px）。如上圖所示，此時原來頁面的上半部分「消失」，就是被頂上去了，只顯示原來頁面的下半部分。 但至少咱們要的頁面佈局不變形已經實現了。等輸入完，軟鍵盤收起時，頁面恢復原狀。

ipad 的問題解決了，要是 APP 運行在其餘手機端上呢？此時，CSS3 @media 屬性就排上用場了。 假設要適配 iphone5 和 iphone6

/* iphone5 width:320; height:568*/
@media (min-width: 320px) {
	.app {
		min-height: 568px;
		height: 100vh;
	}
}
/* iphone6 width:375; height:667*/
@media (min-width: 375px) {
	.app {
		min-height: 667px;
		height: 100vh;
	}
}
複製代碼

這樣設置便可適配 iphone5 和 iphone6