html - Iphone safari 无法在键盘打开时调整视口(viewport)大小

Question

当键盘弹出时，移动版 safari 不会更新 window.innerHeight。 (至少在 9.3.5 中，并且有几个答案，如 this 一个，评论说在 ios 8.2 中崩溃了)

Apple documentation 说 used to say before they edited it window.innerHeight 将在 iOS 10 中回归。

In iOS 10, WKWebView objects match Safari’s native behavior by updating their window.innerHeight property when the keyboard is shown, and do not call resize events.

我需要知道在此期间要做什么来处理 iphone safari 只是将网站推出 View ，而不是调整大小。

---

我有一个对所有内容都使用绝对定位的应用程序，并且有一个在页眉和页脚之间溢出的 div。

.mainContent {
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 0;
  right: 0;
}

Plunker在这里。

屏幕截图，在 android 上按预期工作:

在 iphone 上没有按预期工作:

基于 this answer我有一个 native JS 方法来确定 iphone 键盘是否打开，

    document.getElementById('chat-input').addEventListener('focus', function(){
      if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
        console.log("IOS focus");
        var scroll = window.scrollTop;
        window.scrollTop = 10;
        var keyboard_shown = window.scrollTop > 0;
        window.scrollTop = scroll;

        if(keyboard_shown){
          console.log("keyboard");
        }else{
          console.log("no keyboard");
        } 
      } 
    });
  })();

但这实际上并没有解决问题，因为 window.innerHeight 没有改变，所以我不知道键盘有多大。我可以列出 iphone 分辨率及其键盘高度，然后成为一个糟糕的硬编码人......

Answer 1

从 iOS 13 开始，这似乎已经通过使用 VisualViewport API 解决了。实现。