手机软键盘弹起致使页面变形的一种解决方案

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

    原文作者:woai3c
    原文地址: https://segmentfault.com/a/1190000018957982
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞