android - 使用渐进式 Web 应用程序时 Android 软菜单重叠

Question

我正在开发一个渐进式网络应用程序，并在我的手机上使用 in 运行它之后manifest.json "display": "fullscreen"。
我发现，每当我使用虚拟键盘时，它都不会调出其下方通常的“软菜单”（我使用的是 Pixel 2 XL）。
这是一些屏幕截图，因此您可以理解我的意思：

当我想输入内容时，每当键盘出现时，都没有软菜单，所以如果我想通过点击左下角来隐藏键盘，它可以触发我的 pwa UI 上的一个按钮。

但是，如果我尝试用手指从屏幕底部“向上滑动”，它将显示如下所示的软菜单：

这种交互似乎有点不对劲，并且没有提供良好的用户体验，目前我主要使用浏览器基础版本，因为尝试隐藏键盘通常会导致触发 Web 应用程序上的链接或按钮。

你有任何想法如何纠正这个问题吗？

非常感谢。

标签： androidreactjsprogressive-web-apps

Answer 1

您正在使用显示模式 fullscreen。全屏模式：

在没有任何浏览器 UI 的情况下打开 Web 应用程序并占用整个可用显示区域。

这包括顶部的状态栏（带有时钟等）和底部的导航栏。

如果您希望导航栏对用户可见，而无需他们滑动可见，则必须使用standalone显示模式。