当 PWA 显示设置为全屏时,API 不允许视口根据输入事件进行调整,因此虚拟键盘将始终覆盖应用程序。欲了解更多详情,请参阅渐进式 Web 应用程序软键盘和导航栏在全屏中重叠 https://stackoverflow.com/questions/48473821/progressive-web-app-soft-keyboard-and-nav-bar-overlaps-in-fullscreen
最简单的解决方案是将其设置为独立。否则:
例如,您可以执行的强制视口更新的一种通用 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 完成加载时运行。