H5防止安卓手机软键盘弹出挤压页面导致变形的方法

Posted 2023-03-30

参考技术A

在做移动端h5页面时，因为遇到了安卓端软键盘会导致页面压缩变形的问题，经过查阅与思考，终于解决问题，以下为解决过程。

演示地址： demo

安卓端： 安卓中，如果将 footer元素 设置为 position:fixed 或 absolute ，因为软键盘会改变页面的高度（将页面顶上来），因此 footer元素 也跟着移动上来，导致页面变形；

IOS端： 苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。

安卓端解决input键盘弹出导致页面压缩变形的方法为：

方法1：将元素设置成 static 或者 relative ，不要脱离文档流。

因为使用 fixed 或者 absolute ，会使得元素跟随 body 的底部移动，而安卓端软键盘将导致 body 高度变小而导致变形。

方法2：若想设置成 absolute ，则可以通过js固定其父级元素（如 body 或者 父级div ）的高度

例如1： 设置元素高度时以 px 为单位设置，不要以 % 或 vh 为单位

例如2： 写个监听resize事件（浏览器窗口大小调整时触发）

当键盘弹出的时候，固定 body 高度不变。

注：不要设置成 fixed

vue解决安卓手机软键盘弹出,页面高度被顶起

参考技术A 在进行聊天界面开发的时候，发现安卓手机键盘会把界面顶起，但是不会收回来，在网上找到了这个方法解决

之前我是在mounted中根据document.activeElement.tagName的值判断是否为INPUT去改变键盘弹起的高度

但是在下方加了一个按钮之后，发现点击语音按钮后再切换到输入框，

document.activeElement.tagName的值变成BODY了，查找资料发现

所以此方法在点击语音后再也调用不起来，困扰了一天的问题，记录一下