最近用 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