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

一、背景

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

演示地址：demo

二、图示

修改前（安卓端）

修改前（安卓端）

修改前（IOS端）

修改前（IOS端）

修改后（安卓端）

修改后（安卓端）

三、原因分析

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

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

四、解决方法

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

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

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

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

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

• 若需动态适应不同手机屏幕高度（以px为单位），可以在页面渲染时用js获取屏幕高度，经过计算后得出元素的高度

let Height = window.innerHeight - 160;
$('div').height(Height);

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

let Height = $('body').height();
$(window).resize(function() {
    $('body').height(Height);
});

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

注：不要设置成fixed