Iphone Safari 不在键盘打开时调整视口大小

Question

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

Apple documentation ~~says~~ 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 只是将网站推出视图，而不是调整大小。

我有一个对所有内容都使用绝对定位的应用程序，并且有一个 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

Safari and WKWebView on iOS 10 do not update the window.innerHeight property when the keyboard is shown. On previous versions of iOS WKWebView would update the window.innerHeight property when the keyboard is shown.

似乎文档现在陈述的行为与 OP

指出的行为相反

Answer 2

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

Answer 3

截至 2021 年 3 月，window.innerHeight 确实反映了 iPad 运行 IOS 14.4.1

上存在软键盘

Iphone Safari 不在键盘打开时调整视口大小

Iphone safari not resizing viewport on keyboard open

html

css

mobile-safari

viewport

ios