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

Question

当弹出键盘时,移动safari不会更新window.innerHeight.(至少在9.3.5中,有几个像这样的答案,评论说在ios 8.2中打破了)

苹果文件 说 常说,他们编辑它之前是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;
}

这里的人物.

截图,在android上按预期工作:

在iphone上没有按预期工作:

根据这个答案,我有一个原生的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实现解决。

Answer 2

Safari 10 Docs

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

似乎文档现在陈述了OP所指出的相反行为

Answer 3

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