当键盘显示时使用 jquery 调整窗口 Safari 的大小

Question

首先，我知道有很多关于这个话题的问题。我现在已经搜索了几个星期，但找不到适合我的答案。

我有一个网站，底部有一个输入字段。该网站的设计非常简单。

• 标题
• 内容（动态高度）
• 带有输入字段的页脚

问题很简单但很烦人。当用户单击/点击电脑网络浏览器中的输入字段时，一切正常。当在移动网络浏览器中点击输入字段时，所有除了 safari 都会降低内容 div 的高度。

当你在 safari 中点击它时，由于输入字段是底部，整个页面会向上滚动，用户会丢失一部分标题和内容（溢出）。

我该如何解决这个问题？ 我可以指示 safari 在打开键盘时重新计算布局吗？ 我尝试过很多事情，比如固定布局（对我来说很痛苦）、触发输入字段时触发事件、调整内容 div 的高度（但不同设备上有不同的键盘）、调整文档、正文和内容的高度容器 div（其他所有东西都在里面）。

[来源] 在该来源上还有一些解决方法和技巧。但我无法让他们为我工作。我希望实现页脚和页眉保持固定，并且内容减小大小。即使我确实通过 jquery/css 更改了内容 div 的高度，当键盘显示时，页脚下方也会有一个空白区域。

我读了很多帖子、代码、文章，如medium、旧堆栈溢出帖子和不同网站上的jquery代码，但我无法正确理解。

有没有简单而有效的方法来解决这个问题？如果可能的话，没有任何代码，这会使事情变得不必要的复杂。我最好的猜测是我可以指示 safari 重新计算视口高度并让 css 在键盘出现时执行其操作？

如果需要代码示例，我很高兴给你。

提前致谢。

我尝试过的事情：

• 阅读文章
• 谷歌搜索了大约几周
• 测试许多不同来源的 jquery、css 和插件
• 构建一个小示例来查找问题根源
• 在不同设备和操作系统的不同浏览器中进行测试

Answer 1

好吧，经过深思熟虑，我找到了一个可行的解决方案，所以我在这里发帖，而不是其他人想使用它。

首先：如果您想在输入字段获得焦点并且键盘出现时禁用滚动：

input[type=text]:focus {
    animation: DisableScrollingWhenKeyboard 0.01s;
}

@keyframes DisableScrollingWhenKeyboard {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

不能与下面的代码一起使用，因为内部高度永远不会改变。

它的作用很简单，它改变了不透明度，因此 safari 在检查输入框时看不到输入框；因此 Safari 不会滚动页面。但现在事情可以躲在键盘后面了。所以这不适合我。在here找到了这段代码。重要的是不提。

我现在所做的实际上是写在here，但有一些更改。

首先，检查它是否是 safari（我知道有更好的选择，但现在我对此很满意）

var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

当您确实检测到该...浏览器时

1. 获取内部Window的原始高度
2. 获取身体高度
3. 当键盘完全抬起时（大约需要 200ms）再次检查，看看是否有差异。当有差异时：
4. 了解差异。不同之处在于现在键盘的高度。例如：高度为 1000px，键盘向上时屏幕的新高度为 700px。键盘高度为300px。
5. 将主体设置为新高度（originalHeight - newHeight）
6. 向后滚动页面

是的，当键盘出现时，它会出现一点闪烁的情况，但我对此很满意。它适用于不同的屏幕和键盘，因为高度是计算出来的。

function resizeHandler() {       
  var OriginalviewportHeight = window.innerHeight
  var OriginalBodyHeight =  $('body').height();       
  setTimeout(function(){
    if(OriginalviewportHeight != window.innerHeight){
      KeyboardHeight = OriginalviewportHeight - window.innerHeight;             
      $('body').css("height", + (OriginalBodyHeight - KeyboardHeight) +"px");
      $(window).scrollTop(0);
    }            
  },200); 
}

所有这一切都是在输入字段获得焦点时完成的（并且屏幕高度差异的检查不会让它在计算机屏幕上或在 safari 中使用物理键盘触发）。

 $("#userInputField").focus(function(){
        if (is_safari){
            resizeHandler();
        }            
    });

当我们再次失去焦点时，再次重置车身高度：

$( "#userInputField" ).on( "focusout", function() {
        if (is_safari){
             $('body').css("height", "100%");
        }    
    });

我知道这不是最完美的解决方案，但目前它可以解决输入字段获得焦点时滚动的问题，并且仅限于 safari 手机/平板电脑。因此 chrome、android、firefox 等的流畅 UX 不会被破坏。

有任何需要改进的想法，请分享。 我希望这可以帮助某人或指出正确的方向。