移动端网页实现对虚拟键盘的响应

遇到一个需求：一个手机网页，但要求布局能够响应手机键盘

当键盘唤起与未唤起时，内容区要有不同的高度：

第一感觉是，键盘位置这种接口得是 Native 才能得到的

下结论前还是查了一下，发现浏览器也为网页提供了不那么成熟的方案：VisualViewport

参考：developer.mozilla.org/zh-CN/docs/…

MDN 明确提到这是一个实验性技术

接下来在代码里实现我们开始提到的需求

需要监听视觉视口的 resize 事件：当手机键盘出现，触发 resize 对视觉视口的高度进行获取

useEffect(() => {
    window.visualViewport?.addEventListener("resize", () => {
      setVisualViewportHeight(window.visualViewport?.height || 0)
    })

    return () => {
      window.visualViewport?.removeEventListener("resize", () => {
        alert(window.visualViewport?.height)
      })
    }
}, [])

在 iOS Chrome 下测试是可以得到不同的 visualViewportHeight 的

利用这个方法可以对内容区域的元素进行调整，从而实现对键盘高度的响应