安卓手机输入法挤压界面解决办法

一、首先说一下页面会变形的原因，主要是因为定位用的是fixed或者absolute，在页面输入框弹出时，导致clientHeight变化引起的。

解决办法：

1、如果是mui等混合app的页面：

var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

window.onresize=function(){

    var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

if(resizeHeight*1<originalHeight*1){

        plus.webview.currentWebview().setStyle({height:originalHeight });

    }

}

2、如果是html页面的话,我是利用把fixed或者absolute的元素定位转成relative来解决的：

var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

document.querySelector('.container').style.height=originalHeight.toString()+'px'

window.onresize=function(){

var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

if(resizeHeight*1<originalHeight*1){

document.querySelector('.section-bottom').style.position='relative'

}else{

document.querySelector('.section-bottom').style.position='fixed'

}

}

注意事项：在解决挤压过程中，还遇到一个小插曲，就是使vh定位或者设置高度的元素都会发生形变，因此建议如果页面里面如果有input等输入框的话，最好不要使用vh来设置高度，最好使用rem或者100%（高度100%设置会比较麻烦）来调节自适应，在这里推荐flexiable.js

希望大神如果有其他更好的解决办法，希望能进一步讨论。