一、首先说一下页面会变形的原因,主要是因为定位用的是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
希望大神如果有其他更好的解决办法,希望能进一步讨论。