一、首先說一下頁面會變形的原因，主要是因為定位用的是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

希望大神如果有其他更好的解決辦法，希望能進一步討論。