一、首先说一下页面会变形的原因，主要是因为定位用的是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来解决的：
扫描二维码关注公众号，回复：
4634953 查看本文章
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
希望大神如果有其他更好的解决办法，希望能进一步讨论。