时间戳

首页 > 解决方案 > 在 PWA 中，虚拟键盘与 html 元素重叠，而在移动 chrome 浏览器中则不会

android - 在 PWA 中，虚拟键盘与 html 元素重叠，而在移动 chrome 浏览器中则不会

问题描述

我已将我的网络应用程序构建为渐进式网络应用程序 (PWA)。一切都很好，除了当我单击输入以在 pwa 中输入内容时，键盘隐藏了位置固定在底部的元素。在使用 chrome 在 android 上查看的网站上，这不是问题。

我尝试使用连接到我手机的 devtools 进行调试，但那里没有出现键盘。

有谁知道我能做些什么来解决这个问题？

存在此问题的元素之一：

.scanner .text-input-btn {
    position: fixed!important;
    bottom: 18vh;
    left: 50vw;
    margin-left: -28px;
}

我认为这可能是 google chrome 的 PWA 启动器中的一个错误，我认为 webview 仍然是设备高度的 100%，即 100% 减去虚拟 android 键盘的高度。

在浏览器中：（正确） 在浏览器中 在 PWA 中：（错误） 在 PWA 中

标签： androidhtmlgoogle-chromeandroid-softkeyboardprogressive-web-apps

解决方案

查看您的 manifest.json 并确保显示属性是独立的，我们在将显示设置为全屏时遇到了一些问题，三星键盘将焦点从 PWA 中移开

推荐阅读