小序

由小米mix首發，緊接著全面屏時代來臨，本人是米粉入手小米mix2，使用者體驗賊拉好，漸漸的全面屏手機漫步市場... (跑題了)

在做公眾號時，用全民屏手機發現了一個問題，當時定位問題就花費了三天時間，各種除錯，最後終於定位問題，並解決。過程如下:

問題解析

在移動端時點選input框，調起鍵盤彈出,此時！！！出問題了

使用chrome除錯注意觀察可視視窗的大小

還未點選時

喚起輸入法軟鍵盤

放開軟鍵盤

放開後可視窗變大， 造成的問題

1. 下拉到底分頁阻塞無法執行

2. 彈出框的位置

3. 整體頁面定位錯位

解決問題

在使用正常安卓手機時 不會出現這種問題

現在全面屏來臨對全面屏也會有相容問題

用小米mix2 將虛擬鍵盤隱藏 在進行專案時 輸入input框調起軟鍵盤 這時虛擬鍵盤會出現

並 將你整個可視視窗撐大 然後你對這種問題進行定位

1. 手機需要有虛擬鍵盤

2. 將手機的虛擬鍵盤隱藏

3. 虛擬鍵盤喚醒時是浮在視窗上 而不是頂到視窗下

4. 調起軟鍵盤

5. 如果有個性手勢操作則不會觸發

極少數的手機會發生這種情況

在將前面幾項定位了之後

在進入專案時 將初始的可視視窗記錄 使用sessionStroage儲存

if (!sessionStorage.getItem('height')) {
    let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    sessionStorage.setItem('height', Number(height))
}
// 使用resize監控頁面可視視窗
window.onresize = function temp () {
    // 如果可視視窗大於咱們的初始值 那麼 就是這種情況發生了 (一般不可能發生)進行彈框
    if (window.innerHeight > sessionStorage.getItem('height')) {
        alert('您是否隱藏虛擬鍵？隱藏虛擬鍵頁面可能會出現介面佈局，點選相應錯位等問題, 非常抱歉, 如果不是請聯絡客服')
    }
}
 

因為發生的情況很少，但是還是儘量提高使用者體驗,所以選擇這種解決辦法。

困擾幾天的問題，問題不大，僅記錄

嗖嗖嗖~ 原文地址