背景

在移動端Web開發中，特別是iOS Safari瀏覽器，當用户點擊輸入框觸發鍵盤彈出時，經常會遇到頁面佈局異常和意外滾動的問題。這些問題嚴重影響用户體驗，需要通過技術手段進行優化。

問題描述

1. 主要問題

  • 鍵盤彈出時頁面可滾動：用户在非內容區域滑動時，整個頁面會發生滾動
  • 視口高度變化檢測困難：傳統的window.innerHeight在iOS中可能不會隨鍵盤變化
  • 佈局錯亂：鍵盤彈出後頁面元素位置發生異常變化

2. 問題原因分析

  • 頁面內容高度超過視口：鍵盤彈出後可視區域變小，但頁面內容總高度超過了縮小後的視口高度
  • iOS Safari行為特性：鍵盤彈出時頁面會自動滾動以確保輸入框可見
  • 觸摸事件冒泡：在固定區域的滑動事件會冒泡到body元素

解決方案

1. 核心思路

  • 使用visualViewport API檢測真實的視口變化
  • 動態調整頁面高度以適應鍵盤狀態
  • 通過CSS佈局和屬性控制滾動行為

2. 技術實現

2.1 視口高度檢測
// 兼容性檢測，優先使用visualViewport
this.currentViewportHeight = window.visualViewport ?
window.visualViewport.height : window.innerHeight;
// 監聽視口變化
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', this.handleViewportChange);
} else {
window.addEventListener('resize', this.handleViewportChange);
}
2.2 動態頁面高度調整
// 設置頁面高度，防止鍵盤彈出時頁面滾動
setPageHeight(height) {
document.documentElement.style.height = height ? height + 'px' : '';
document.body.style.height = height ? height + 'px' : '';
const demo = document.querySelector('.keyboard-demo');
if (demo) {
demo.style.height = height ? height + 'px' : '100vh';
}
}
2.3 CSS佈局優化
/* 防止整個頁面滾動 */
body {
overflow: hidden;
}
.keyboard-demo {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex-shrink: 0; /* 不允許縮放 */
height: 60px; /* 固定高度 */
touch-action: none; /* 禁用觸摸滾動 */
}
.input-container {
flex-shrink: 0; /* 不允許縮放 */
height: 60px; /* 固定高度 */
touch-action: none; /* 禁用觸摸滾動 */
}
.content {
overflow-y: auto; /* 允許垂直滾動 */
flex: 1; /* 佔用剩餘空間 */
}

3. 關鍵技術點

3.1 visualViewport API
  • 優勢：能準確反映鍵盤對視口的影響
  • 兼容性：現代瀏覽器支持，需要降級處理
3.2 Flex佈局
  • 固定區域：使用flex-shrink: 0防止縮放
  • 自適應區域：使用flex: 1佔用剩餘空間
  • 滾動控制：只在內容區域允許滾動
3.3 觸摸事件控制
  • touch-action: none：禁用特定區域的觸摸滾動
  • overflow: hidden：防止body級別的滾動

代碼Demo

Vue組件版本

鍵盤適配Demo
        
            

        
            當前視口高度: {{ currentViewportHeight }}px
            鍵盤狀態: {{ keyboardStatus }}
            
        
    

<script>
export default {
    data() {
        return {
            inputValue: '',
            currentViewportHeight: 0, // 當前視口高度，用於適配鍵盤彈出
            keyboardStatus: '鍵盤收起'
        };
    },
    mounted() {
        this.currentViewportHeight = window.visualViewport ?
            window.visualViewport.height : window.innerHeight;
        this.setPageHeight(this.currentViewportHeight);
        if (window.visualViewport) {
            window.visualViewport.addEventListener('resize', this.handleViewportChange);
        } else {
            window.addEventListener('resize', this.handleViewportChange);
        }
    },
    beforeDestroy() {
        if (window.visualViewport) {
            window.visualViewport.removeEventListener('resize', this.handleViewportChange);
        } else {
            window.removeEventListener('resize', this.handleViewportChange);
        }
        this.setPageHeight();
    },
    methods: {
        // 設置頁面高度，防止鍵盤彈出時頁面滾動
        setPageHeight(height) {
            document.documentElement.style.height = height ? height + 'px' : '';
            document.body.style.height = height ? height + 'px' : '';
        },
        // 視口高度變化處理
        handleViewportChange() {
            this.currentViewportHeight = window.visualViewport ?
                window.visualViewport.height : window.innerHeight;
            this.setPageHeight(this.currentViewportHeight);
        },
        onFocus() {
            this.keyboardStatus = '鍵盤彈出';
        },
        onBlur() {
            this.keyboardStatus = '鍵盤收起';
        }
    }
};
</script>

使用説明

  1. 集成到項目：將核心代碼集成到現有項目中
  2. 測試驗證：在iOS設備上測試鍵盤彈出效果
  3. 樣式調整：根據項目需求調整固定區域高度和樣式

兼容性説明

  • iOS Safari 13+：完全支持
  • Android Chrome：基本支持
  • 其他瀏覽器：通過降級方案支持

總結

通過結合visualViewport API、動態高度調整和CSS佈局控制，可以有效解決iOS移動端鍵盤適配問題，提供流暢的用户體驗。關鍵在於：

  1. 準確檢測視口變化
  2. 合理的佈局設計
  3. 精確的滾動控制

該解決方案已在實際項目中驗證，具有良好的穩定性和兼容性。