iOS Safari 键盘出现不会触发 window.resize 事件

Question

我有一个需要响应键盘外观的布局。

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

我准备了一个小 Demo，展示内部高度如何响应键盘外观。您可以点击输入以调出键盘。

// 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 的建议解决方法是什么？

Answer 1

window.visualViewport.addEventListener可以使用，并且每当键盘显示/隐藏时就会触发

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