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

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

Answer 1

window.visualViewport.addEventListener可以使用，只要显示/隐藏键盘就会触发

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