Iphone safari 无法在键盘打开时调整视口大小

当键盘弹出时，Mobile safari 不会更新 window.innerHeight。 （至少在9.3.5中，并且有几个答案，例如this https://stackoverflow.com/a/17604856/2423187一，有评论说在 ios 8.2 中损坏）

Apple documentation https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_35 says used to say before they edited it https://web.archive.org/web/20160613195513/https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html that window.innerHeight will be back with iOS 10.

在 iOS 10 中，WKWebView 对象通过在显示键盘时更新其 window.innerHeight 属性来匹配 Safari 的本机行为，并且不调用调整大小事件。

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

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

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

Plunker http://plnkr.co/edit/kPzXJSYswWnjNljXm0FG?p=preview here.

屏幕截图，在 Android 上按预期工作：

在 iPhone 上无法按预期工作：

基于这个答案 https://stackoverflow.com/a/2601085/2423187我有一个原生的 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 分辨率及其键盘高度，然后成为一个糟糕的硬编码人员......

从 iOS 13 开始，这个问题似乎已经通过使用解决了视觉视口API https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport执行。