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

Question

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

Apple 文档 说 在编辑之前曾经说过 window.innerHeight 将在 iOS 10 中回归。

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

我需要知道同时要做什么来处理 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 文档

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

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

Answer 3

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

Answer 4

添加到@Matan Hershberg，每当视口调整大小时更改 document.body 的高度（VisualViewport API）。

使用这种方法，带有

position: absolute

的元素将无法按预期工作，为了解决这个问题，我们可以将

transform: rotate(0)

添加到 body 中，以使所有子元素相对于 body，即使元素是

position: fixed

。

Angular 中的工作代码 Stackblitz 链接