iOS Safari键盘出现不会触发窗口大小改变事件

Question

我有一个布局需要响应键盘出现。

• 安卓（版本6+） - 当键盘出现时，window.resize会触发。
• iOS（版本10+） - window.resize不会触发。

我准备了一个小演示，展示了内部高度如何响应键盘的出现。您可以点击输入框来唤起键盘。

// select the paragraph element
const innerHeightParagraph = document.getElementById("inner-height")

// set the innerHeight for the first time.
innerHeightParagraph.innerText = window.innerHeight

// register resize event.
window.addEventListener('resize', function() {
  innerHeightParagraph.innerText= window.innerHeight
})

p {
  font-size:60px; margin:0px;


}

<h1>Current InnerHeight</h1>
<p id="inner-height"></p>
<input></input>

iOS的推荐解决方法是什么？

- LiranC

---

在iOS上监听window.resize真的很烦人，有时会因为惯性滚动而触发，但是当键盘打开时它不会触发。 - tudorpavel

我愿意听取任何有助于我响应键盘出现的想法。 - LiranC

这个想法是当键盘打开时，实际窗口高度不会改变，因此您应该保持初始高度并允许滚动。 - tudorpavel

此外，如果您不需要更改页面的高度，只想检测键盘何时打开，您可以使用输入焦点。如果您的输入已聚焦，则键盘已打开。 - tudorpavel

是的，当键盘弹出时，innerHeight 不会改变，因此 resize 事件不会触发。我们是否有任何适当的修复方法，而不是采用一种变通方法？ - Rakesh Shravz

Answer 1

window.visualViewport.addEventListener 可以使用，它会在键盘显示/隐藏时触发。

  if (window.visualViewport) {
    window.visualViewport.addEventListener("resize", () => {
      console.log("visualViewport RESIZE IS TRIGGERED");
    });
  }

- Ivan