Explain:解决MUI 软键盘弹起挤压页面问题
問題:在使用mui和H5+進行移動端開發的時候,經常會遇見需要用戶輸入的情況
當input獲取焦點彈起軟鍵盤的時候,經常會遇見軟鍵盤擠壓頁面、軟鍵盤遮擋輸入框等一系列問題;?
?
原因:造成這種現象的原因是,當軟鍵盤彈出的時候,webview窗口被擠壓,高度變小了,所以這個時候,絕對定位的按鈕就會跟隨webview一起上移,給人的感覺就是按鈕被頂上去了;?
?
解決辦法:在安卓手機上,當頁面被擠壓的時候,頁面大小發生了改變,會觸發onresize事件,在頁面出口變小的時候,手動去設置webview的高度大小,就能解決問題;
?
//獲取原始窗口的高度
var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;
window.οnresize=function(){
//軟鍵盤彈起與隱藏 都會引起窗口的高度發生變化
var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(resizeHeight*1<originalHeight*1){
//resizeHeight<originalHeight證明窗口被擠壓了
plus.webview.currentWebview().setStyle({ height:originalHeight });
}
}
轉載于:https://www.cnblogs.com/chung2017/p/9675114.html
總結
以上是生活随笔為你收集整理的Explain:解决MUI 软键盘弹起挤压页面问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MySQL视图、事务与存储过程
- 下一篇: IAAS、PAAS与SAAS