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

X_AirDu 发布于2019-08-23 17:05 / 2218人阅读

摘要：最近用一种第三方开发框架开发，其中一个页面有十几个输入框，在点击输入时，软键盘弹起，导致页面往上顶，底部的按钮也全部弹到页面上面去了，布局全被打乱。等输入完，软键盘收起时，页面恢复原状。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103778.html

可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0
iphone 软键盘弹起，禁止页面整体往上滚动

摘要：最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在手机上火把页面整个卷走，只看到页面的下半部分。最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在IOS手机上火把页面整个卷走，只看到页面的下半部分。首先经过反复调试，找到两条重要线索： 1、先找到键盘弹起时页面中会改变的值：测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度、被卷去的高度這...

marek 2019-08-23 13:51 评论0 收藏0
iphone 软键盘弹起，禁止页面整体往上滚动

摘要：最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在手机上火把页面整个卷走，只看到页面的下半部分。最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在IOS手机上火把页面整个卷走，只看到页面的下半部分。首先经过反复调试，找到两条重要线索： 1、先找到键盘弹起时页面中会改变的值：测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度、被卷去的高度這...

android_c 2019-08-02 12:08 评论0 收藏0
iphone 软键盘弹起，禁止页面整体往上滚动

摘要：最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在手机上火把页面整个卷走，只看到页面的下半部分。最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在IOS手机上火把页面整个卷走，只看到页面的下半部分。首先经过反复调试，找到两条重要线索： 1、先找到键盘弹起时页面中会改变的值：测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度、被卷去的高度這...

bluesky 2019-08-29 17:28 评论0 收藏0