h5 android 個別機型, fixed 布局被軟鍵盤頂上去,遮擋輸入框


原因:html、body設置了 height: 100% 的自適應布局后,高度跟隨屏幕的可用高度改變而改變導致的。

解決辦法:

1、不使用 fixed 定位,使用替代方案(推薦):

a:使用 position:absolute; overflow-y:scroll;

b:使用 display:flex; overflow-y:scroll;

其中,a方案內容區域的高度通過js控制;b方案內容區域的高度通過flex布局自動排版;

2、根據輸入框獲取焦點與失去焦點事件切換 fixed 定位與 static 定位

也可以根據軟鍵盤是否彈起,是否改變屏幕可用高度,來改變 定位方式 或 顯示隱藏 fixed定位元素

docmHeight: document.documentElement.clientHeight,  // 默認屏幕高度
showHeight: document.documentElement.clientHeight,   // 實時屏幕高度
hideshow: true // 顯示或者隱藏
// 監聽
watch:{
  showHeight: function() {
    if(this.docmHeight > this.showHeight) {
        this.hideshow = false
    } else {
        this.hideshow = true
    }
  }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM