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

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

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

你可能感兴趣的:(工作中遇到的bug)