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