当虚拟键盘在全屏显示模式下处于活动状态时，PWA 不会调整窗口大小

Question

我正在开发一个 PWA，主要针对移动用户。据我所知，网络的默认行为是，当虚拟键盘处于活动状态时，窗口大小会相应调整。这对于网络上的移动设备和独立显示模式来说效果很好。在全屏模式下，当键盘处于活动状态时，窗口大小不会改变。这导致输入被隐藏在键盘后面。现在有人知道为什么会出现这种情况吗？或者是否有破解方法可以解决这个问题？ （比如手动获取键盘的高度等）据我所知，该问题仅发生在 android chrome 上，ios safari 按预期工作。

Answer 1

当 PWA 显示设置为全屏时，API 不允许视口根据输入事件进行调整，因此虚拟键盘将始终覆盖应用程序。有关更多详细信息，请参阅 Progressive Web-App Soft-全屏时键盘和导航栏重叠

最简单的解决方案是将其设置为独立。否则：

您可以执行的强制视口更新的一种通用 CSS 解决方法是使用 :focus-within，例如（注意，未广泛测试）：

@media only screen and (orientation: landscape) and (hover: none) {
    body:focus-within,
    body:focus-within .an-absolutely-positioned-input-ancestor {
        max-height: 53vh;
        overflow: auto;
    }
}

我们使用的更具体的解决方法是使用 Javascript 将 input_focus 类添加到 body 标记仅在焦点事件上特定适用的表单元素，然后使用 CSS 选择该元素并设置该元素的样式（绝对/固定）以浮动在键盘上方。
使用 jQuery 的简要示例：

JS

var inputs = jQuery('input[type="text"]').add('textarea');
inputs.each((index, input) => {
    input.on('focus', e => {
        jQuery('body').addClass('input_focus');
    }).on('blur', e => {
        jQuery('body').removeClass('input_focus');
    });
}

CSS

body.input_focus :is(
    input[type="text"],
    textarea
    ):focus {position: fixed;} /* position as you need */

注意：如果使用 AJAX 动态加载 DOM 区域，请将 JS 包装在函数 & 中。每次 AJAX 完成加载时运行。

Answer 2

这是一个 CSS 问题...通常是静态定位和/或静态高度值的结果。
尝试更新body标签的样式；将其位置设置为相对。

此外，有时所需要做的就是将应用程序包装器的高度更新为动态值，例如 100% 或 100vh。