最近用 uniapp(一种第三方 app 开发框架) 開发 app其中一个页面有十几个 input 输入框,在点击 input 输入时软键盘弹起,导致页面往上顶底部的按钮也全部弹到页面上面去了,布局全被打亂
在开发APP时,通常情况下页面的宽度和高度都会设为 100%即页面高度等于屏幕高度,页面宽度等于屏幕宽度
当 input 获取焦点时,软键盘弹出页面高度被挤压,此时页面高度 = 屏幕高度 - 软键盘高度所以,页面高度缩小元素都挤压在一起,布局被打乱
一种可行的解决方案:給页面设置一个最小高度,即一个能让所有元素按原来布局排列的高度
我开发的 APP 运行在 ipad上,横屏显示时高度为 768px ,我可以把 768px 当做页面的朂小高度
软键盘还是会弹起,因为页面最小高度被设为了 768px所以此时总高度为 768px + 软键盘高度,超出了屏幕高度(ipad横屏屏幕高度为768px)如上圖所示,此时原来页面的上半部分“消失”就是被顶上去了,只显示原来页面的下半部分但至少我们要的页面布局不变形已经实现了。等输入完软键盘收起时,页面恢复原状