我們在開發的時候一般都有頂部固定個按鈕的設計,按鈕的樣式我們一般都會使用position:fixed;bottom:0的定位
這樣當頁面上有輸入框的時候,我們在點擊輸入框獲取焦點吊起軟鍵盤后固定在底部的元素就會被頂起,
之所以會出現這種情況,是因為軟鍵盤彈出會導致Webview的高度發生變化,進而導致html中元素位置發生變化。
其實也可以認為元素定位沒有變,只是元素所在容器的寬高變化,看起來像是元素的位置變了。
軟鍵盤被喚起的時候,原本屬於Webview的空間被軟鍵盤占用了(是占用,不是覆蓋或者遮蓋)。屏幕一共就那么高,軟鍵盤把Webview的空間占用了一部分,那么Webview自然就被擠壓,高度也就變了。
解決辦法
var footer= document.querySelector('.footer');
// 可見區域高度減去元素的高度
footer.style.top = document.documentElement.clientHeight - 40 + 'px';
完成