移動端鍵盤頂起遮擋輸入框

先上圖

 

 

 一般在開發中咱們會遇到這樣輸入框被遮擋的問題，那麼該怎麼解決呢？

 

方案一（兼容性優先）：

首先，把置底元素設置成，在頁面的底部而非屏幕的底部

.page .bottom { position: absolute; bottom: 0; width: 100%; border: 0; text-align: center; z-index: 5; } 

而後，設置頁面的高度，讓按鈕有置底的效果

.page { background: #fff; color: #384369; position: relative; width: 100%; overflow-y: auto; height: 100vh; min-height: 480px; } 

注意有最小高度，由於當鍵盤彈起時，100vh是縮小的那部分的高度，而不是屏幕高度
*若是有大屏的需求，適配一下就好

這樣，當鍵盤彈起時，內容就是能夠滾動的了，出於用戶體驗的需求，能夠在focus輸入框的時候，把滾動條劃一下，露出輸入框

function whenFocus(){ document.body.scrollTop = document.documentElement.scrollTop =86; } 

具體的數值能夠再調整

方案二（兼容性優先）：

<div class="main"> <div class="content"></div> <button></button> </div> 

設置content爲 overflow: auto;
讓content的高度爲 100vh-buttonHeight

方案三（flex佈局）：

使用第二種的html

.main{
    height: 100vh; display: flex; flex-direction: column; justify-content: space-between; .content { overflow: auto; } } 

 

 

方案四（最穩妥）：

利用window.resize方法，這個方法的特性是：當調整瀏覽器窗口的大小時，發生 resize 事件。

data(){
    return{ screenHeightNoChange: true, } }, mounted() { const self = this; window.onresize = () => { if (self.oldFullHeight) { self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight; console.log(' self.screenHeightNoChange ' + self.screenHeightNoChange); } }; }, 

screenHeightNoChange==true的時候使用方法三，當==false的時候，將button變成position:relative; 就能解決問題了

其中在移動端我最經常使用的仍是flex佈局的辦法