Iphone safari没有在键盘打开时调整视口大小

Question

移动Safari在弹出键盘时不会更新window.innerHeight。 （至少在9.3.5中，有几个答案，如this一个，评论说在ios 8.2中打破了

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

  

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

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

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

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

Plunker此处。

截图，在android上按预期工作：

在iphone上没有按预期工作：

基于this answer我有一种原生的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

Safari 10 Docs

  

iOS 10上的Safari和WKWebView在显示键盘时不会更新window.innerHeight属性。在以前版本的iOS上，WKWebView会在显示键盘时更新window.innerHeight属性。

似乎docs现在陈述了OP指出的相反行为

Answer 2

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

Answer 3

截至 2021 年 3 月，window.innerHeight 确实反映了运行 IOS 14.4.1 的 iPad 上存在软键盘