最近用 uniapp（一種第三方 app 開發(fā)框架） 開發(fā) app，其中一個(gè)頁(yè)面有十幾個(gè) input 輸入框，在點(diǎn)擊 input 輸入時(shí)，軟鍵盤彈起，導(dǎo)致頁(yè)面往上頂，底部的按鈕也全部彈到頁(yè)面上面去了，布局全被打亂。

原來的樣子：

軟鍵盤彈出來后：

在開發(fā)APP時(shí)，通常情況下頁(yè)面的寬度和高度都會(huì)設(shè)為 100%，即頁(yè)面高度等于屏幕高度，頁(yè)面寬度等于屏幕寬度。
當(dāng) input 獲取焦點(diǎn)時(shí)，軟鍵盤彈出，頁(yè)面高度被擠壓，此時(shí)頁(yè)面高度 = 屏幕高度 - 軟鍵盤高度。所以，頁(yè)面高度縮小，元素都擠壓在一起，布局被打亂。

一種可行的解決方案：給頁(yè)面設(shè)置一個(gè)最小高度，即一個(gè)能讓所有元素按原來布局排列的高度。

舉例：

我開發(fā)的 APP 運(yùn)行在 ipad上，橫屏顯示時(shí)，高度為 768px ，我可以把 768px 當(dāng)做頁(yè)面的最小高度。

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

軟鍵盤還是會(huì)彈起，因?yàn)轫?yè)面最小高度被設(shè)為了 768px，所以此時(shí)總高度為 768px + 軟鍵盤高度，超出了屏幕高度（ipad橫屏屏幕高度為768px）。如上圖所示，此時(shí)原來頁(yè)面的上半部分“消失”，就是被頂上去了，只顯示原來頁(yè)面的下半部分。但至少我們要的頁(yè)面布局不變形已經(jīng)實(shí)現(xiàn)了。等輸入完，軟鍵盤收起時(shí)，頁(yè)面恢復(fù)原狀。

ipad 的問題解決了，要是 APP 運(yùn)行在其他手機(jī)端上呢？此時(shí)，CSS3 @media 屬性就排上用場(chǎng)了。
假設(shè)要適配 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;} }

這樣設(shè)置即可適配 iphone5 和 iphone6

總結(jié)

以上是生活随笔為你收集整理的手机软键盘弹起导致页面变形的一种解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。