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

简介: 手机软键盘弹起导致页面变形的一种解决方案

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

目录
相关文章
|
3月前
|
小程序 JavaScript
小程序一个页面调用多个号码的手机拨号功能
小程序一个页面调用多个号码的手机拨号功能
54 0
|
3月前
|
移动开发 小程序 Android开发
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
72 0
一个手机页面的导航代码,附效果图
一个手机页面的导航代码,附效果图
|
5月前
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
vue--ios手机input点击手机输入键盘顶起页面解决方案
vue--ios手机input点击手机输入键盘顶起页面解决方案
|
5月前
|
移动开发
手机h5页面唤起打电话、发短信功能
手机h5页面唤起打电话、发短信功能
|
7月前
|
网络协议 Linux Android开发
Android部分手机4G网第一次请求很慢(wifi正常)解决方案
Android部分手机4G网第一次请求很慢(wifi正常)解决方案
211 0
|
8月前
|
Android开发 C++
Android 6.0以上手机报 so: has text relocations 问题的终极解决方案
Android 6.0以上手机报 so: has text relocations 问题的终极解决方案
|
9月前
【自媒体直播】手机摄像电脑控制OBS多平台推流解决方案
【自媒体直播】手机摄像电脑控制OBS多平台推流解决方案
245 0
|
10月前
|
测试技术
Fiddler 使用fiddler无法抓取苹果手机https请求问题解决方案
Fiddler 使用fiddler无法抓取苹果手机https请求问题解决方案
214 0

相关产品

  • 云迁移中心