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

Question

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

Answer 1

当 PWA 显示设置为全屏时，API 不允许视口(viewport)根据输入事件进行调整，因此虚拟键盘将始终覆盖应用程序。欲了解更多详情，请参阅Progressive Web-App Soft-Keyboard and Nav Bar overlaps in Fullscreen

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

例如，您可以执行的强制视口(viewport)更新的一种通用 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 选择该元素并将该元素(绝对/固定)设置为 float 在上面键盘。 使用 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 完成加载时运行。