iOS Safari中如何更高效获取键盘尺寸或实现键盘上方悬浮按钮？

问题核心 #

使用window.visualViewport.height计算iOS Safari虚拟键盘起始位置时，首次触发focus后的resize事件会先返回无键盘状态的视口高度，第二次才返回正确的带键盘高度，导致按钮首次移动有延迟。

原因分析 #

iOS Safari在虚拟键盘弹出过程中会触发多次visualViewport的resize事件：第一次是键盘开始弹出但尚未完全占据屏幕空间的过渡状态，第二次及之后才是键盘完全展开后的稳定视口高度。原代码仅监听一次resize且判断高度不等于最大视口高度就停止，会误捕获过渡状态的高度值。

优化方案 #

方案1：实时监听resize并动态调整位置（无需预存高度）

取消预存keyboardStartPos的逻辑，每次focus时持续监听resize事件，实时根据当前visualViewport.height调整按钮位置，直到blur时移除监听。这样无论首次还是后续操作，都能直接获取最新的视口高度，完全避免延迟。

方案2：等待视口高度稳定后再保存值

如果仍想预存高度，可在resize事件中等待连续两次返回的视口高度一致（即高度稳定），再保存该值并移除监听，避免捕获过渡状态的错误值。

修改后的示例代码（方案1实现） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <style>
        #menuBtn {
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <textarea id="textArea"></textarea>
    <button id="menuBtn">Test</button>

    <script>
        const menuBtnElem = document.getElementById('menuBtn');
        const originalElemCss = menuBtnElem.style.cssText;
        const visibleView = window.visualViewport;
        const textAreaElem = document.getElementById('textArea');
        
        // 实时调整按钮位置的函数
        function adjustButtonPosition() {
            const visibleViewHeight = visibleView.height;
            // 将按钮定位到视觉视口底部上方
            menuBtnElem.style.bottom = 'auto';
            menuBtnElem.style.top = (visibleViewHeight - menuBtnElem.offsetHeight) + 'px';
        }

        // 监听focus事件，添加resize监听并立即执行一次调整
        textAreaElem.addEventListener('focus', () => {
            visibleView.addEventListener('resize', adjustButtonPosition);
            adjustButtonPosition();
        });

        // 监听blur事件，移除resize监听并恢复按钮样式
        textAreaElem.addEventListener('blur', () => {
            visibleView.removeEventListener('resize', adjustButtonPosition);
            menuBtnElem.style.cssText = originalElemCss;
        });
    </script>
</body>
</html>

方案2代码片段（稳定后保存高度） #

如果需要预存高度，可修改监听逻辑：

let keyboardStartPos = 0;
let lastViewHeight = 0;
let stabilizationCount = 0;

function listenForViewReduction() {
    visibleView.addEventListener('resize', function func() {
        const visibleViewHeight = visibleView.height;
        
        // 连续两次高度相同则认为状态稳定
        if (visibleViewHeight === lastViewHeight) {
            stabilizationCount++;
            if (stabilizationCount >= 2) {
                keyboardStartPos = visibleViewHeight;
                moveElemAboveKeyboard();
                visibleView.removeEventListener('resize', func);
                stabilizationCount = 0;
            }
        } else {
            stabilizationCount = 0;
            lastViewHeight = visibleViewHeight;
        }
    });
}

额外说明 #

• 方案1更简洁且无需维护预存值，推荐优先使用；
• 自动打开关闭键盘的方案会干扰用户体验，不建议采用；
• 预存设备高度的方案不可靠，iOS设备型号众多且系统版本可能影响键盘高度，无法覆盖所有场景。

内容的提问来源于stack exchange，提问作者micky_mikes