安卓手機輸入法擠壓介面解決辦法
阿新 • • 發佈:2018-12-24
一、首先說一下頁面會變形的原因,主要是因為定位用的是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
注意事項:在解決擠壓過程中,還遇到一個小插曲,就是使vh定位或者設定高度的元素都會發生形變,因此建議如果頁面裡面如果有input等輸入框的話,最好不要使用vh來設定高度,最好使用rem或者100%(高度100%設定會比較麻煩)來調節自適應,在這裡推薦flexiable.js
希望大神如果有其他更好的解決辦法,希望能進一步討論。