一文解决前端软键盘兼容性问题

小小小小宇
856 阅读10分钟

前端软键盘兼容性问题概述

移动端Web开发中，当用户聚焦到输入框（如 <input>, <textarea>）时，操作系统会弹出软键盘。这个行为在iOS和Android上表现差异很大，主要影响页面的布局、可见区域和用户交互，是前端开发中常见的痛点。

核心差异点：

  1. 视口(Viewport)处理机制：

    • iOS (Safari & WKWebView): 通常不会调整 layout viewport（布局视口）的大小。软键盘会浮动在网页内容之上，遮挡部分区域。visual viewport（视觉视口）会缩小以适应键盘上方的可见内容。window.innerHeight 在键盘弹出前后可能 不会 改变，或者改变行为不一致（取决于iOS版本和具体上下文）。这导致依赖100vh或window.innerHeight进行布局的元素表现异常，position: fixed 的元素（尤其是底部固定的）容易被遮挡或行为怪异。
    • Android (Chrome & WebView): 通常会调整 layout viewport 的大小。当键盘弹出时，浏览器窗口的可用高度（window.innerHeight）会减小，导致页面内容进行reflow（重新布局）以适应新的、较小的高度。这通常能让输入框保持可见（浏览器会尝试滚动），但可能引发剧烈的布局抖动，并且100vh会动态变化。position: fixed 的元素通常会随着视口的缩小而保持其相对位置（比如固定在可见区域底部，即键盘上方）。

  2. 事件触发与时序：

    • 键盘弹出和收起的精确事件在Web标准中长期缺失，开发者通常依赖 focus, blur, resize 等事件来间接判断。resize 事件在Android上比较常用（因为视口大小确实改变了），但在iOS上则不那么可靠（视口大小不变，但视觉区域变了）。
    • 事件触发的时机、键盘动画的持续时间等都可能存在差异，导致依赖事件的逻辑在不同平台表现不一。

  3. position: fixed 元素的行为：

    • iOS: 是重灾区。键盘弹出时，fixed 元素（尤其是 bottom: 0）可能会被键盘顶上去、悬浮在页面中间、甚至被完全遮挡。有时输入框在 fixed 元素内部时，问题更复杂。较新的iOS版本有所改善，但兼容性问题依然存在。
    • Android: 由于 layout viewport 缩小，fixed 元素通常能较好地依附于可见区域的边缘（例如，bottom: 0 会贴在键盘上方）。

  4. 滚动行为：

    • 当输入框被键盘遮挡时，浏览器通常会尝试自动滚动页面，使输入框可见。但这个自动滚动的行为、滚动的目标位置（输入框顶部、中部或底部对齐视口）以及滚动的平滑度在两个平台上可能不同，有时甚至会失效（特别是在复杂布局或自定义滚动容器中）。

  5. vh 单位：

    • iOS: 100vh 通常指代没有键盘时的完整视口高度。键盘弹出后，它不会动态改变。
    • Android: 100vh 通常会随着 layout viewport 的缩小而动态改变，变为键盘上方的可见区域高度。
    • CSS提供了新的视口单位如 svh (Small Viewport Height), lvh (Large Viewport Height), dvh (Dynamic Viewport Height) 来尝试解决这个问题，但需要考虑浏览器兼容性。dvh 可能是最接近我们期望动态适应键盘的单位。

常见问题、解决方案及原理

问题一：输入框被键盘遮挡

  • 现象: 用户点击输入框后，键盘弹出，但输入框被键盘覆盖，用户无法看到自己输入的内容。

  • 原理 (iOS): 键盘覆盖内容，浏览器自动滚动有时不足或失效。

  • 原理 (Android): 视口调整，理论上会自动滚动，但也可能因布局复杂性、CSS overflow 设置等原因失败。

  • 解决方案:

    1. 利用 scrollIntoView(): 在输入框获得焦点时，手动调用其 scrollIntoView() 方法。
    2. 手动计算与滚动: 在输入框获得焦点时，获取其位置，判断是否会被键盘遮挡（需要估算键盘高度或使用 Visual Viewport API），然后手动滚动页面或其滚动容器。
    3. 使用 Visual Viewport API (推荐，但需注意兼容性): 这个较新的API可以提供视觉视口的信息，更精确地判断可见区域和进行调整。

  • 代码示例 (基于 scrollIntoView()):

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>键盘遮挡处理</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            /* 创建足够的内容使页面可滚动 */
            height: 150vh; 
            font-family: sans-serif;
        }
        .container {
            padding: 20px;
        }
        .spacer {
            height: 80vh; /* 推开输入框，使其初始位置靠下 */
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        input[type="text"], textarea {
            width: 80%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 20px; /* 输入框之间的间距 */
            display: block; /* 使其独占一行 */
        }
        /* 模拟一个可能被键盘遮挡的输入框 */
        #potentially-obscured-input {
            /* 初始可能位于视口下半部分 */
        }
        #log {
            position: fixed;
            bottom: 60px; /* 假设有一个非底部的固定元素 */
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px;
            font-size: 12px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>软键盘兼容性测试</h1>
        <p>滚动页面，找到下方的输入框并点击。</p>

        <div class="spacer">我是占位符，把输入框推下去</div>

        <input type="text" id="input1" placeholder="普通输入框 1">
        <textarea id="textarea1" placeholder="文本区域 1"></textarea>
        <input type="text" id="potentially-obscured-input" placeholder="这个输入框初始在页面下方，容易被遮挡">
        <input type="text" id="input3" placeholder="普通输入框 3">

        <div id="log">等待操作...</div>
    </div>

    <script>
        const logDiv = document.getElementById('log');
        function log(message) {
            console.log(message);
            logDiv.textContent = message;
        }

        // 获取所有输入框和文本区域
        const inputElements = document.querySelectorAll('input[type="text"], textarea');

        // 为每个输入元素添加 focus 事件监听器
        inputElements.forEach(element => {
            element.addEventListener('focus', (event) => {
                const targetElement = event.target;
                log(`元素 ${targetElement.id || targetElement.placeholder} 获得焦点`);

                // 使用 setTimeout 确保键盘有时间开始弹出，DOM状态可能更稳定
                // 延迟时间可能需要根据实际情况调整，但通常很短即可
                setTimeout(() => {
                    log(`触发 scrollIntoViewIfNeeded (或 scrollIntoView) for ${targetElement.id}`);

                    // scrollIntoViewIfNeeded 是非标准的，但某些浏览器（如旧版WebKit）效果更好
                    // scrollIntoView 是标准方法
                    if (targetElement.scrollIntoViewIfNeeded) {
                        // 参数 true 表示滚动到视口中心（如果可能）
                        // targetElement.scrollIntoViewIfNeeded(true); 
                         targetElement.scrollIntoView({
                            behavior: 'smooth', // 平滑滚动
                            block: 'center',    // 尝试垂直居中对齐 (可选 'start', 'end', 'nearest')
                            inline: 'nearest'   // 水平方向对齐（通常不关键）
                        });
                        log('使用了 scrollIntoViewIfNeeded 或 scrollIntoView(center)');
                    } else {
                        // 标准的回退方案
                        targetElement.scrollIntoView({
                            behavior: 'smooth', 
                            block: 'center' // 或者 'nearest' 可能更安全，避免过度滚动
                        });
                        log('使用了 scrollIntoView(center)');
                    }

                    // ---- 备选/增强方案：手动检查和滚动 ----
                    // 如果 scrollIntoView 效果不佳，可以尝试手动计算
                    // checkAndScrollManually(targetElement);

                }, 100); // 短暂延迟，给键盘弹出留出时间
            });

            element.addEventListener('blur', (event) => {
                log(`元素 ${event.target.id || event.target.placeholder} 失去焦点`);
                // 可以在这里添加键盘收起后的逻辑，但不一定可靠
            });
        });

        // --- 手动检查和滚动的函数 (更复杂，但控制更精确) ---
        function checkAndScrollManually(element) {
            log('尝试手动检查和滚动...');
            const elementRect = element.getBoundingClientRect();
            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

            // 假设一个大致的键盘高度比例，或者使用 VisualViewport API (如果可用)
            // 注意：这是一个非常粗略的估计，实际键盘高度未知！
            const estimatedKeyboardHeight = window.visualViewport ? (window.innerHeight - window.visualViewport.height) : viewportHeight * 0.4; // 假设键盘占40%高度
            const visibleViewportTop = window.visualViewport ? window.visualViewport.offsetTop : 0;
            const visibleViewportHeight = window.visualViewport ? window.visualViewport.height : viewportHeight;


            log(`元素顶部: ${elementRect.top}, 元素底部: ${elementRect.bottom}`);
            log(`视觉视口高度: ${visibleViewportHeight}, 视觉视口偏移: ${visibleViewportTop}`);
            log(`估算键盘高度: ${estimatedKeyboardHeight}`);

            const elementTopInLayoutViewport = elementRect.top;
            const elementBottomInLayoutViewport = elementRect.bottom;

            // 判断元素是否在视觉视口之下 (或者说被键盘遮挡)
            // 使用 visualViewport.height 判断更准确
            const isObscured = elementBottomInLayoutViewport > visibleViewportHeight; 
            // 或者判断是否有一部分在可视区域下方
            // const isPartiallyObscured = elementBottomInLayoutViewport > visibleViewportHeight && elementTopInLayoutViewport < visibleViewportHeight;

            if (isObscured) {
                log('元素可能被遮挡，尝试手动滚动');
                // 计算需要滚动的距离
                // 目标：让元素底部刚好在可见区域（键盘上方）的某个位置，比如留出一点边距
                const desiredBottomMargin = 10; // 距离可见区域底部的边距
                const scrollAmount = (elementBottomInLayoutViewport - visibleViewportHeight) + desiredBottomMargin;

                log(`需要向上滚动约 ${scrollAmount}px`);

                // window.scrollBy(0, scrollAmount); // 相对滚动
                // 或者滚动到绝对位置
                window.scrollTo({
                    top: window.scrollY + scrollAmount,
                    behavior: 'smooth'
                });

            } else {
                log('元素应在可见区域内，不执行手动滚动');
            }
        }

        // --- 监听 Visual Viewport API 的 resize 事件 (更现代的方式) ---
        if (window.visualViewport) {
            log('支持 VisualViewport API');
            window.visualViewport.addEventListener('resize', () => {
                // 这个事件在键盘弹出/收起导致视觉视口变化时触发，比 window.resize 更精确
                log(`VisualViewport Resized: H=<span class="math-inline">{window.visualViewport.height}, OffsetTop=</span>{window.visualViewport.offsetTop}`);

                // 在这里可以重新检查当前焦点元素的位置并调整
                const activeElement = document.activeElement;
                if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
                    log(`VisualViewport变化时，焦点元素是 ${activeElement.id}，重新检查可见性`);
                    // 短暂延迟后执行检查，等待resize完成
                    setTimeout(() => checkAndScrollManually(activeElement), 50); 
                }
            });
            window.visualViewport.addEventListener('scroll', () => {
                 // 当视觉视口相对于布局视口滚动时触发（例如，用户在键盘上方的小区域内滚动页面）
                 // log(`VisualViewport Scrolled: OffsetTop=${window.visualViewport.offsetTop}`);
            });

        } else {
            log('不支持 VisualViewport API，依赖传统方法');
            // 在不支持 Visual Viewport API 的情况下，可以回退到监听 window resize
            // 但要注意 resize 在 iOS 上行为不一致
            window.addEventListener('resize', debounce(() => {
                 log(`Window Resized: H=${window.innerHeight}`);
                 // 同样检查焦点元素
                 const activeElement = document.activeElement;
                 if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
                     log(`Window resize 时，焦点元素是 ${activeElement.id}，重新检查可见性 (可能不准确)`);
                     setTimeout(() => checkAndScrollManually(activeElement), 100); // 延迟可能需要更长
                 }
            }, 200)); // 使用防抖减少触发频率
        }

        // --- 工具函数：防抖 ---
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        };

        // 初始日志
        log('页面加载完成，脚本已执行。');

    </script>
</body>
</html>

    代码解释:

    1. HTML: 包含几个输入框和一个文本区域，其中一个 id="potentially-obscured-input" 通过 spacer div 被推到页面下方。还包含一个 log div 用于显示调试信息。meta viewport 设置 user-scalable=no 有时能减少缩放问题，但影响可访问性，需谨慎使用。

    2. CSS: 基础样式，body 设置足够高度以产生滚动条。spacer 用于布局。log div 固定在页面某个位置（非底部，避免与底部 fixed 元素混淆）。

    3. JavaScript:

      • log() 函数：方便在页面上和控制台输出日志。

      • 获取所有输入元素 (inputElements)。

      • 遍历元素并添加 focus 事件监听器。

      • 核心逻辑 (focus listener):

        • 当元素获得焦点时，记录日志。

        • 使用 setTimeout 包裹滚动逻辑。这是一个常见的 hack，目的是等待浏览器开始处理键盘弹出动画和可能的初始滚动，然后再介入。延迟时间（例如100ms）需要测试和调整。

        • scrollIntoView(): 优先尝试调用 element.scrollIntoView({ behavior: 'smooth', block: 'center' })。behavior: 'smooth' 提供平滑滚动效果。block: 'center' 尝试将元素垂直居中对齐到可见区域，这通常能提供较好的上下文视野。'nearest' 是更保守的选项，只在元素不可见时滚动最小距离使其可见。'start' 或 'end' 分别对齐到顶部或底部。

        • scrollIntoViewIfNeeded(): 这是一个非标准的方法，但在一些旧版WebKit（包括某些iOS版本）中可能效果更好，作为一种备选。

        • 手动检查与滚动 ( checkAndScrollManually 函数): 这是更复杂的备选方案。

          • 获取元素的 getBoundingClientRect() 来得到其相对于 视口 的位置。
          • 获取视觉视口的高度 window.visualViewport.height (如果支持) 或回退到 window.innerHeight。
          • 估算键盘高度（非常不精确）或者通过 window.innerHeight - window.visualViewport.height 计算得出（如果API可用）。
          • 判断元素的底部 elementRect.bottom 是否超出了视觉视口的高度 visibleViewportHeight。
          • 如果被遮挡，计算需要向上滚动的距离，使元素的底部位于可见区域内（并留有一定边距）。
          • 使用 window.scrollTo() 或 window.scrollBy() 执行滚动。

      • Visual Viewport API 监听:

        • 检查 window.visualViewport 是否存在。
        • 如果存在，监听其 resize 事件。这个事件在键盘弹出/收起导致视觉视口大小变化时触发，是比 window.resize 更可靠的信号。
        • 在 resize 事件回调中，检查当前是否有输入框处于激活状态 (document.activeElement)，如果是，则调用 checkAndScrollManually (或 scrollIntoView) 来确保其可见性，因为视觉视口的变化可能再次导致遮挡。同样使用 setTimeout 延迟执行。
        • 还监听了 scroll 事件（可选），它在视觉视口内部滚动时触发。

      • Window Resize 回退: 如果不支持 VisualViewport API，则回退监听 window.resize 事件。使用 debounce 函数来防止高频触发，尤其是在Android上视口调整时。回调逻辑与 visualViewport.resize 类似，但要知道 window.resize 在iOS上可能不会按预期触发。

      • debounce 工具函数: 一个标准的防抖函数，用于限制 resize 事件处理的频率。

问题二：position: fixed 元素（尤其是底部导航栏/按钮）行为异常

  • 现象 (iOS): 键盘弹出时，底部 fixed 元素可能被顶飞、悬浮在键盘上方、遮挡输入框，或者在键盘收起后不回到原位。

  • 现象 (Android): 通常表现较好，fixed 元素会贴在键盘上方。但如果输入框本身就在 fixed 元素内部，交互可能依然复杂。

  • 原理: iOS的视口处理机制导致 fixed 定位相对于 layout viewport，而键盘覆盖在 visual viewport 上。Android调整 layout viewport，fixed 元素相对新视口定位。

  • 解决方案:

    1. 检测焦点与位置调整 (iOS 常用):

      • 监听输入框的 focus 事件。

      • 判断焦点发生时，fixed 元素是否会与键盘冲突（例如，输入框位置较低，同时存在 bottom: 0 的 fixed 元素）。

      • 如果是，临时改变 fixed 元素的样式：

        • 将其 position 改为 absolute，并计算 bottom 值使其恰好位于估算的键盘上方（困难且不精确）。
        • 或者简单地 display: none 或 visibility: hidden 隐藏该元素。
        • 或者给页面底部增加一个 padding-bottom，把内容（包括输入框）整体推高，使得输入框聚焦时自然位于键盘上方，而 fixed 元素可能被顶出视口外或行为更可预测。

      • 监听 blur 事件，在键盘收起后（通常 blur 之后）恢复 fixed 元素的原始样式。需要注意 blur 事件触发的时机可能不完全等于键盘收起。

    2. 避免将输入框放在底部 fixed 元素内: 设计上规避这种布局。

    3. 使用 Visual Viewport API 辅助定位: 获取 visualViewport.height 和 offsetTop，可以更精确地计算 fixed 元素应在的位置（如果选择动态调整 position: absolute）。

    4. 接受平台默认行为 (有时是最佳选择): 尤其是较新iOS版本，系统可能尝试更智能地处理 fixed 元素。过度干预可能引入新问题。

  • 代码示例 (iOS 焦点检测与样式调整):

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Fixed Footer 处理</title>
<style>
    body { height: 150vh; margin: 0; padding-bottom: 60px; /* 为 fixed footer 预留空间 */ }
    .content { padding: 20px; }
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: lightcoral;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        transition: bottom 0.2s ease-out, visibility 0.2s ease-out; /* 添加过渡效果 */
    }
    /* 当键盘可能弹出时，应用的样式 */
    .footer.keyboard-visible {
         /* 方案一：隐藏 */
         /* visibility: hidden; */
         /* opacity: 0; */

         /* 方案二：改为 absolute，尝试定位到键盘上方 (非常不精确) */
         /* position: absolute; */
         /* bottom: estimatedKeyboardHeight + 'px'; */ /* 需要动态计算 */

         /* 方案三：直接推到底部外面 (简单有效，但元素不可见) */
         bottom: -60px; /* 或者一个足够大的负值 */
         visibility: hidden; /* 配合 bottom 负值，确保隐藏 */
    }
    input { display: block; margin: 20px 0; padding: 10px; width: 80%; }
    .spacer { height: 70vh; background: #eee; margin-bottom: 20px; }
</style>
</head>
<body>
    <div class="content">
        <h1>测试 Fixed Footer</h1>
        <input type="text" placeholder="输入框 1">
        <div class="spacer">占位符</div>
        <input type="text" id="low-input" placeholder="页面下方的输入框">
    </div>
    <div class="footer" id="myFooter">
        我是 Fixed Footer
    </div>

    <script>
        const footer = document.getElementById('myFooter');
        const inputs = document.querySelectorAll('input[type="text"]');
        let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        let activeInput = null;
        let keyboardVisible = false; // 状态标记

        function handleFocus(event) {
            activeInput = event.target;
            // 在iOS上，当输入框获得焦点时，假设键盘即将弹出
            // 可以在这里增加判断逻辑，比如只在输入框位置靠下时才调整footer
            const inputRect = activeInput.getBoundingClientRect();
            const viewportHeight = window.innerHeight;

            // 简单判断：如果输入框底部在视口下半部分，认为可能与底部footer冲突
            if (isIOS && inputRect.bottom > viewportHeight / 2) {
                 console.log('iOS focus on low input, hiding footer.');
                 footer.classList.add('keyboard-visible');
                 keyboardVisible = true;
                 // 可以考虑同时给 body 加 padding-bottom 来推高内容
                 // document.body.style.paddingBottom = '估算的键盘高度px'; 
            } else {
                console.log('Focus event, but not adjusting footer (not iOS or input is high).');
            }
        }

        function handleBlur() {
             console.log('Blur event occurred.');
             // 不论平台，输入框失去焦点时，都尝试恢复 footer
             // 使用 setTimeout 稍微延迟，等待可能的键盘收起动画或视口恢复
             setTimeout(() => {
                 // 检查是否还有其他输入框是激活状态 (例如，用户快速切换输入框)
                 if (document.activeElement !== activeInput || (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA')) {
                     if (keyboardVisible) {
                          console.log('Input blurred, restoring footer.');
                          footer.classList.remove('keyboard-visible');
                          // 恢复 body padding (如果之前设置了)
                          // document.body.style.paddingBottom = '60px'; // 恢复预留空间
                          keyboardVisible = false;
                     }
                     activeInput = null;
                 } else {
                     console.log('Blur detected, but focus likely shifted to another input. Footer state unchanged.');
                     // 如果焦点立即转移到另一个输入框，handleFocus会再次触发
                     activeInput = document.activeElement; // 更新当前激活的输入框
                 }
             }, 100); // 延迟时间可能需要调整
        }

        inputs.forEach(input => {
            input.addEventListener('focus', handleFocus);
            input.addEventListener('blur', handleBlur);
        });

         // --- 使用 VisualViewport API 改进 (可选) ---
         if (window.visualViewport) {
             let initialViewportHeight = window.innerHeight; // 记录初始高度
             window.visualViewport.addEventListener('resize', () => {
                 const currentViewportHeight = window.visualViewport.height;
                 console.log(`VisualViewport resize: ${currentViewportHeight}`);

                 // 键盘弹出通常 visualViewport.height < window.innerHeight
                 // 但要注意横屏等情况
                 const likelyKeyboardVisible = currentViewportHeight < initialViewportHeight - 50; // 阈值判断

                 if (likelyKeyboardVisible && activeInput) {
                     console.log('VV resize suggests keyboard is visible.');
                     if (!keyboardVisible && isIOS) { // 仅在iOS上且之前未隐藏时操作
                         console.log('VV resize triggered footer hide.');
                         footer.classList.add('keyboard-visible');
                         keyboardVisible = true;
                     }
                 } else if (!likelyKeyboardVisible && keyboardVisible) {
                      console.log('VV resize suggests keyboard is hidden.');
                       // 键盘收起时，VV 高度会恢复
                       if (keyboardVisible) {
                           console.log('VV resize triggered footer restore.');
                           footer.classList.remove('keyboard-visible');
                           keyboardVisible = false;
                           // 这里恢复可以更及时，不一定需要blur事件的延迟
                       }
                 }
                 // 更新初始高度，以应对可能的旋转等情况
                 // initialViewportHeight = window.innerHeight; // 或者在旋转事件中更新
             });

             // 监听屏幕旋转，可能需要重置状态或初始高度
             window.addEventListener('orientationchange', () => {
                setTimeout(() => {
                    initialViewportHeight = window.innerHeight;
                    console.log('Orientation changed, updated initialViewportHeight.');
                    // 可能需要根据当前状态重新判断footer显隐
                }, 300); // 等待旋转后布局稳定
             });
         }

         console.log(`Detected platform: ${isIOS ? 'iOS' : 'Android/Other'}`);

    </script>
</body>
</html>

    代码解释:

    1. HTML: 包含内容、占位符、一个靠下的输入框 (#low-input) 和一个 position: fixed 的底部 footer。body 增加了 padding-bottom 为 footer 预留空间。

    2. CSS:

      • .footer 设置为 position: fixed; bottom: 0;。
      • .footer.keyboard-visible 类定义了键盘弹出时 footer 的样式。这里采用了方案三：设置一个负的 bottom 值并配合 visibility: hidden 将其移出屏幕并隐藏。添加了 transition 使显隐更平滑。

    3. JavaScript:

      • 获取 footer 和所有输入框。

      • isIOS 变量用于检测是否为iOS设备。

      • activeInput 存储当前获得焦点的输入框。

      • keyboardVisible 标记 footer 当前是否因键盘而隐藏。

      • handleFocus:

        • 记录当前激活的输入框。
        • 核心判断 (iOS): 如果是iOS设备，并且获得焦点的输入框 getBoundingClientRect().bottom 大于视口高度的一半（这是一个简化的判断，表示输入框位置靠下），则添加 keyboard-visible 类来隐藏 footer，并设置 keyboardVisible 标记。

      • handleBlur:

        • 当输入框失去焦点时触发。
        • 使用 setTimeout 延迟处理，给键盘收起动画留时间，并处理焦点快速切换的情况。
        • 在延迟回调中，检查当前 document.activeElement 是否还是刚刚失去焦点的那个输入框，或者焦点是否移到了非输入类型的元素上。如果焦点确实离开了输入框，并且 keyboardVisible 为 true，则移除 keyboard-visible 类，恢复 footer，并重置标记。

      • 为所有输入框绑定 focus 和 blur 事件。

      • VisualViewport API 改进 (可选):

        • 如果支持 visualViewport，监听其 resize 事件。
        • 通过比较 visualViewport.height 和初始 window.innerHeight (或 visualViewport 的初始高度) 来判断键盘是否可能弹出或收起（这是一个更可靠的信号）。
        • 根据判断结果，相应地添加或移除 keyboard-visible 类。这种方式可以更准确地响应键盘状态变化，而不仅仅依赖 focus/blur。
        • 增加了方向变化 (orientationchange) 的监听，因为旋转会改变视口高度，需要更新基准值 initialViewportHeight。

问题三：vh 单位在键盘弹出时表现不一致

  • 现象: 使用 height: 100vh 的元素，在Android上键盘弹出时高度会缩小，而在iOS上通常不变（或变化方式不同）。

  • 原理: 如前所述，Android调整layout viewport，vh随之变化；iOS调整visual viewport，vh通常基于layout viewport保持不变。

  • 解决方案:

    1. 避免关键布局使用 100vh: 如果需要占满屏幕高度，优先考虑 height: 100% （需要父元素有确定高度，直至 html, body）。

    2. 使用 JavaScript 动态设置高度: 监听 resize 事件（Android）或 visualViewport.resize 事件（推荐），获取 window.innerHeight 或 visualViewport.height，然后动态设置元素的高度。务必使用 debounce 处理 resize 事件。

    3. 使用新的CSS视口单位: dvh (Dynamic Viewport Height) 单位被设计用来反映动态变化的视口高度（包括键盘弹出、浏览器UI显隐等）。如果目标浏览器支持度足够，这是最简洁的CSS方案。

      .full-height-element {
    height: 100dvh; /* 使用动态视口高度 */
    /* 或者使用 svh (最小视口高度), lvh (最大视口高度) */
}

    4. 结合 calc() 和 CSS 变量: 可以通过JS更新CSS变量，然后在CSS中使用 calc()。

  • 代码示例 (JS动态设置高度 & dvh):

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>VH 单位处理</title>
<style>
    html, body {
        height: 100%; /* 为 height: 100% 提供基础 */
        margin: 0;
        overflow: hidden; /* 防止body滚动，让内部元素滚动 */
    }
    .container {
        display: flex;
        flex-direction: column;
        height: 100%; /* 继承父元素高度 */
    }
    .header {
        height: 50px;
        background: lightblue;
        flex-shrink: 0; /* 不收缩 */
        display: flex; align-items: center; justify-content: center;
    }
    .content {
        flex-grow: 1; /* 占据剩余空间 */
        overflow-y: auto; /* 内容区可滚动 */
        padding: 15px;
        /* 使用 CSS 变量实现动态高度 */
        /* height: calc(var(--dynamic-height, 100vh) - 50px); */ 
    }
    .footer-input {
         flex-shrink: 0; /* 不收缩 */
         padding: 10px;
         background: #f0f0f0;
    }
    input[type="text"] {
         width: calc(100% - 22px); /* 考虑padding和border */
         padding: 10px;
         border: 1px solid #ccc;
    }

    /* 方案二：使用 dvh (如果浏览器支持) */
    .container-dvh {
         height: 100dvh; /* 直接使用动态视口高度 */
         display: flex;
         flex-direction: column;
         background-color: lightgoldenrodyellow; /* 加个背景区分 */
         margin-top: 20px; /* 和上一个例子分开 */
    }
    .content-dvh {
         flex-grow: 1;
         overflow-y: auto;
         padding: 15px;
    }

     #log {
         position: fixed; top: 55px; left: 5px; background: rgba(0,0,0,0.6); color: white; padding: 3px; font-size: 10px; z-index: 1000;
     }

</style>
</head>
<body>
    <div id="log">Log...</div>

    <div class="container" id="containerJs">
        <div class="header">Header (50px)</div>
        <div class="content" id="contentArea">
            <p>这里是滚动内容区域。</p>
            <p>...</p>
            <p>很多内容...</p>
             <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p>
             <p>底部附近的内容</p>
        </div>
        <div class="footer-input">
            <input type="text" placeholder="输入框在底部">
        </div>
    </div>

    <div class="container-dvh">
        <div class="header">Header DVH (50px)</div>
        <div class="content-dvh">
             <p>DVH 容器: 这里是滚动内容区域。</p>
             <p>...</p>
             <p>很多内容...</p>
             <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p>
             <p>DVH 容器: 底部附近的内容</p>
        </div>
         <div class="footer-input">
             <input type="text" placeholder="DVH 容器中的输入框">
         </div>
    </div>


    <script>
        const logDiv = document.getElementById('log');
        function log(message) { console.log(message); logDiv.textContent = message; }

        const contentArea = document.getElementById('contentArea');
        const containerJs = document.getElementById('containerJs');
        const inputs = document.querySelectorAll('input[type="text"]');

        function debounce(func, wait) { /* ... (防抖函数同上) ... */ 
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // --- 方案一：JS 动态调整高度 (或使用Flexbox天然适应) ---
        // 注意：在这个 Flexbox 布局中，.content 区域使用 flex-grow: 1 会自动填充剩余空间，
        // 所以严格来说，不需要JS直接设置其高度。
        // 但是，如果布局不是 Flexbox，或者需要基于视口精确计算，则需要JS。
        // 下面的代码演示了如何获取和使用视口高度，即使在本例中不是必需的。

        function updateLayout() {
            const viewportHeight = window.innerHeight;
            const visualHeight = window.visualViewport ? window.visualViewport.height : viewportHeight;

            log(`Viewport H: ${viewportHeight}, Visual H: ${visualHeight}`);

            // 如果需要手动设置 content 高度 (非 Flexbox 场景):
            // const headerHeight = 50; // 获取或固定值
            // const footerHeight = document.querySelector('.footer-input').offsetHeight;
            // const contentHeight = visualHeight - headerHeight - footerHeight;
            // contentArea.style.height = contentHeight + 'px';
            // log(`Set content height to: ${contentHeight}px`);

            // 更新 CSS 变量 (如果使用 CSS 变量方案)
            // document.documentElement.style.setProperty('--dynamic-height', visualHeight + 'px');
        }

        // 监听 resize (Android 主要) 和 visualViewport resize (iOS/现代浏览器)
        if (window.visualViewport) {
             window.visualViewport.addEventListener('resize', debounce(updateLayout, 100));
        } else {
            window.addEventListener('resize', debounce(updateLayout, 200));
        }
         // 初始加载时也执行一次
         updateLayout();

         // 聚焦时确保输入框可见 (复用之前的逻辑)
         inputs.forEach(input => {
             input.addEventListener('focus', (event) => {
                 setTimeout(() => {
                     event.target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                     console.log('Scrolled input into view on focus.');
                 }, 100);
             });
         });

         // --- 检查 dvh 支持情况 (可选) ---
         if (window.CSS && CSS.supports('height', '100dvh')) {
             console.log('Browser supports dvh unit.');
         } else {
             console.log('Browser does NOT support dvh unit.');
             // 如果不支持 dvh，方案二的布局可能表现为 100vh 的行为
         }

    </script>
</body>
</html>

    代码解释:

    1. HTML:

      • 创建了两个主要容器：#containerJs (依赖Flexbox和可能的JS) 和 .container-dvh (依赖CSS dvh)。
      • 每个容器都有页眉、内容区和包含输入框的页脚。
      • 内容区设置为可滚动 (overflow-y: auto)。

    2. CSS:

      • html, body 设置 height: 100% 为基于百分比的高度计算提供基础。
      • #containerJs (方案一): 使用 Flexbox 布局 (display: flex; flex-direction: column;)。.header 和 .footer-input 设置 flex-shrink: 0 防止被压缩。.content 设置 flex-grow: 1 使其自动填充剩余空间。这是现代布局中处理这种场景的常用方式，通常比手动JS计算高度更健壮。注释掉了使用CSS变量 --dynamic-height 的备选方案。
      • .container-dvh (方案二): 整体高度直接设置为 100dvh。内部结构与方案一类似，也使用 Flexbox。

    3. JavaScript:

      • updateLayout 函数：获取 window.innerHeight 和 visualViewport.height 并打印日志。注释掉了实际设置 contentArea.style.height 的代码，因为 Flexbox flex-grow: 1 在此例中已足够。如果布局不同，这里就是执行计算和设置样式的逻辑。同时注释了更新CSS变量的示例。
      • 事件监听：使用 debounce 监听 visualViewport.resize (优先) 或 window.resize (回退)，在事件触发时调用 updateLayout。
      • 初始调用 updateLayout。
      • 添加了简单的 focus 监听器来滚动输入框到视图内。
      • 检查 CSS.supports('height', '100dvh') 来判断浏览器是否支持 dvh 单位，并打印日志。

总结与最佳实践

  1. 优先使用现代布局: Flexbox 和 Grid 布局通常能更好地自适应空间变化，减少对固定高度和绝对定位的依赖。
  2. 理解平台差异: 接受iOS和Android在视口处理上的根本不同，不要期望一套代码完美无瑕地在两端表现一致。优先保证核心功能（输入可见性）的可用性。
  3. 拥抱 Visual Viewport API: 它是解决键盘弹出导致视口问题的标准方向。尽可能使用它来获取准确的视觉视口信息，并监听其 resize 事件。做好不支持情况下的回退（如监听 window.resize 并接受其局限性）。
  4. scrollIntoView() 是基础: 确保输入框可见的最简单可靠方法通常是在 focus 时调用 scrollIntoView()。选择合适的 block 参数 (center, nearest, start, end) 并测试效果。
  5. 谨慎处理 position: fixed: 尤其是在iOS上。如果底部 fixed 元素不是绝对必要，考虑其他UI模式。如果必须使用，准备好在键盘弹出时（尤其是在iOS上检测到输入框位置较低时）隐藏它或改变其定位方式。
  6. vh 单位的替代方案: 对于需要精确占满动态变化高度的场景，优先考虑 100% + Flexbox/Grid，其次是 dvh 单位（检查兼容性），最后才是JS动态计算高度。
  7. 延迟和防抖/节流: 处理 focus, blur, resize 事件时，经常需要 setTimeout 来等待浏览器状态更新或动画；resize 事件处理务必使用 debounce 或 throttle 来避免性能问题。
  8. 充分测试: 在各种iOS和Android设备、版本和浏览器（包括WebView环境）上进行彻底测试是必不可少的。关注边界情况，如横屏模式、不同输入法键盘、快速切换输入框等。
  9. 简化输入区域: 避免过于复杂的布局嵌套，尤其是在输入框周围。
  10. 用户体验: 平滑滚动 (behavior: 'smooth')、清晰的焦点状态和避免布局剧烈跳动能提升用户体验。
avatar
文章
阅读
粉丝