一、背景
在做移动端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
