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

一、首先说一下页面会变形的原因，主要是因为定位用的是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*11){

        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

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