Question

更新：好的。所以，这看起来像另一个bug。我在chromium.org找到了一些基本相同问题的门票。在他们的情况下，他们将其呈现为滚动问题，因为作为网络应用程序，它不会在输入焦点和IME弹出窗口上调整视口大小，因此它们无法向下滚动到低于IME的输入字段，并且它赢得了＆＃39; t自动向上滚动。我没有使用正常的输入字段（尽管xterm.js 实际上使用了一个，你只是看不到它），但原因和结果是相同的：视口不会调整大小弹出IME，因此也没有触发调整大小事件。来自票证的摘录：

注意我并不确定我们是否想特别在屏幕键盘上工作很好，甚至完全没有全屏API，因为那是主要的适用于视频和全屏游戏。这是一个低优先级支持＆＃34;常规网站＆＃34;由于某种原因使用全屏API。

根据机票中的工程师的说法，它被认为是一个极低的优先级，尽管从2015年到现在的帖子都有投诉。显然没有计划解决这个问题，特别是因为Firefox有同样的错误。

所以，我的结论是解决问题的唯一现实方法是通过包含内置的HTML5 OSK，如果我想要全屏。这很好，因为我已经有了这个。由于它是一个终端模拟器（有点类似于Android的Termux），它需要完整的101键盘支持。目前我使用黑客键盘，效果很好，并设置＆＃39;显示＆＃39;独立＆＃39;对于PWA（我不太确定它是否符合＆＃39;即时应用程序＆＃39;但它确实创建并安装为来自Chrome或Android浏览器的apk ..仍然是Chrome。）

如果有一个黑客围绕这个让用户使用他们的原生IME并适当调整视口大小，我很乐意听到它，我也可以通过帖子看到其他人。我打开这张票，所以开发人员不要浪费时间和精力去做一些不支持的事情，并希望有人找到解决方法。对于我自己，我已经按照规定使用内置的HTML5 OSK。

对于有兴趣的人，您可以参考门票here和here。

此前：我有一个网络应用程序，我一直在使用它安装到主屏幕＆＃39;有一段时间了。它是一个专门的基于Web的终端，使用xterm.js作为客户端的基础。我已将它用于独立的＆＃39;直到最近，自从在Fullscreen中移植到PWA。在移动设备上，屏幕上的房地产对于这样的应用来说是非常宝贵的，所以全屏是理想的 - 如果我能清除以下障碍：

Android上的IME（软键盘）与应用程序重叠，而不是调整视口大小，使其无法在全屏模式下使用。
当IME弹出时，导航栏图标与应用程序顶部重叠，这是不可取的，因为全屏的全部要点是声称可能是一行或两行额外文本的一英寸终端。

我确信第一次有一个修复，但我已经尝试过的任何事都没有运气。第二，我不太确定。

我计划实施一个可以解决问题的自定义内部IME，但它只完成了一半，我希望用户仍然可以选择使用本机安装的IME。他们的设备。

想法，有人吗？

或者，如果我能够计算出软键盘的高度差，我可以在焦点事件中设置我的脚本中的高度，但我不知道我会怎么做这样做是因为它已经有一个处理程序来调整监听resize事件的font-size / cols / rows，这就是为什么它在这种特殊情况下工作正常。

更多信息：

它正确安装到应用程序抽屉，提示安装，注册服务工作者等。当IME弹出或隐藏时，如果我设置＆＃34;显示＆＃34;：＆＃34;独立＆＃，它会正确调整大小34;在清单中，但在设置时不会调整大小＆＃34;显示＆＃34;：＆＃34;全屏＆＃34;。它有一个很好的包装，带有所有推荐的PWA口哨和口哨。该应用程序包含在iframe中。只要iframe改变了IME的大小，其余的就会随之改变。

我尝试了固定位置和绝对位置，高度100％和100vh，并尝试在身体上设置各种组合。我本以为它的工作方式也一样。

前段时间，在将其设置为PWA之前，我已插入一个功能以使其全屏显示，并且它会为IME调整大小。唯一的问题是导航栏中的图标与应用程序的顶部重叠（如果我没记错的话，当IME隐藏时它们不会消失，尽管它们现在作为PWA）。

独立模式和全屏模式之间唯一真正的区别在于独立应用程序的顶部在导航栏处停止。这是一个很小的区别，但是因为在手机上的风景是一个很大的优点，这是一个额外的一两行，取决于用户的字体设置大小（字体动态调整大小，以及调整大小事件终端上的文本列/行数，以及通过+/-图形控件。

这是iframe：

<iframe src=1ndex.html style="
  position: fixed;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  outline: none;  border: none;
"></iframe>

我不认为元视口标记应该重要，但在这里它是。不应该进行任何浏览器页面缩放。它是一个终端客户端，具有明确的GUI控件，可以更改字体大小和相应的行/列数以适应iframe。无论如何，除了全屏＆＃39;以外的任何其他方式查看它都可以正常工作。在清单中设置，无论是在浏览器chrome中，还是添加到主页＆＃d; dd（在端口到PWA之前）等等。当它作为具有显示的PWA安装到app抽屉时，它只有重叠：＆＃39;全屏＆＃39; （但不是在PWA端口之前通过js设置全屏时）。

<meta id=viewport name=viewport
  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
>

下面＆＃39;全屏清单的略微修改副本：

{
  "name": "asdf",
  "short_name": "asdf",
  "description": "asdf,
  "scope":"/asdf/",
  "start_url": "https://asdf.com/asdf/index.html",
  "display": "fullscreen",
  "background_color": "#000",
  "theme_color": "#000",
  "icons": [{
    "src": "/asdf/favicon.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

这是一个问题。当IME存在时，导航栏图标悬停在应用程序上，除非修复相同，否则我甚至不知道从哪里开始。我提出的所有搜索术语都是通常的教程页面，讨论如何设置PWA，或者说它有多好。

我必须说，我有点震惊的行为是不同的，因为我认为它会违反相同的行为。仅仅因为应用程序是全屏的并不意味着您希望IME与应用程序的底部重叠。无论如何，如果有一个解决方法，它可能是非常简单的事情并不那么明显。

Answer 1

如上所述，这是一个公认的错误，没有修复计划。如果您确实需要或希望您的应用程序在没有OSK / IME覆盖应用程序部分的情况下获得软键盘输入，您可以通过一些DIY OSK解决这个问题。它非常简单（大多数情况下）。如果您的用例与我的一样，那么更容易：您可以将字符直接发送到websocket。假设您的websocket对象被称为＆＃39; socket＆＃39;，软键将如下所示：

<button onclick="socket.send(this.innerHTML)">A</button>

Escape等特殊密钥需要发送＆＃39;转义字符代码＆＃39;像：

<button onclick='socket.send("\x1b")'>ESC</button>

- 或\ 033，\ u001b等，而不是\ x1b。功能相同。

请注意单引号和双引号的反转。由于HTML5允许这样做，因此比使用反斜杠更容易“逃避”＃54;函数内的引号。

如果是基于网络的终端模拟器，某些键（如箭头键）将需要一个终端＆＃39;转义代码＆＃39;此代码取决于TERM类型。对于xterm，它通常是＆＃34; \ x1bO] A＆＃34;或B，C或D，具体取决于方向。 VT100是相同的，但省略了O.您可能必须检查termcap / terminfo db或环境变量字符串以确定，具体取决于系统。

您可以通过复制小写或大写键盘来模拟Shift或Capslock，无论您先制作哪个键盘，然后用其变体替换字母，基本上都是单独的键盘。将每个包裹在div中，然后使用"position: absolute; left: 0px; top: 0px;"样式然后将两个键盘包装在另一个div中。将onclick处理程序附加到每个上的shift键 - 在最顶层的键盘上使用处理程序来隐藏它。在底部键盘中，使用它再次显示顶部键盘。实际上，这与原生IME上的shift键非常相似。

如果目标是传统输入文本或文本区域，请使用以下模式：

document.getElementById('myinputelementid').value += 'A';

密钥处理程序中的

或等效文件。你真的应该得到＆＃39;首先永久输入，然后引用它而不是每次都获取它，但是它们都可以工作。

对于传统的textarea /输入，您必须以不同方式处理箭头，胡萝卜（光标）放置和退格。我的用例是xterm.js，它将通过终端转义序列处理诸如实际退格字符，箭头键等内容。如果您需要使用传统输入，我会留给您查找已建立的DOM方法以执行这些操作。另一方面，您可以找到适合您需求的预制开源OSK。如果你使用node.js，我会在npm网站上看到一个，虽然我不能肯定地说它完成了所有这些，我认为确实如此。您可以通过Googling＆＃39; npm osk＆＃39;找到它，或者直接搜索npm以获得＆＃39; osk＆＃39;。

还有一件事，你需要阻止输入，包括xterm.js关注点击/触摸，否则原生IME会弹出并阻碍。您可以这样做的一种方法是在输入上使用click和touchstart处理程序来阻止.default＆＃39;。这对xterm.js很有用（我不记得隐藏输入的id，但你可以使用Dev Tools找到它）。对于传统输入，您可以使用透明div覆盖它。你可能想要伪造一个光标，因为你将避免实际焦点，它不会出现。有一些很好的网站如何做到这一点。我只是在这里介绍基础知识，主要是针对xterm.js用例，无论如何都显示了一个光标，你只需重新设置它的样式，使它变得坚固而不是轮廓。

如果这在技术上并不涵盖整个解决方法，我会说服，但它确实涵盖了您所需要的大部分内容，并且如果您选择了这条路线，请告诉您如何完成它。我并不是说所有这一切都很容易。但大部分都是。

其他选项是：只使用小而高的输入，使原生IME不能与它们重叠，或者将它们嵌套在足够大的东西中，无论如何都可以向上滚动（可能是凌乱的），或者只是不要使用全屏 - 使用＆＃34;显示＆＃34;：＆＃34;独立＆＃34;代替。

如果有足够的开发者对它们进行修改，那么供应商就会修复它。因此，如果您不喜欢这个问题，我建议您查看上面链接中指出的错误报告，并在报告中表达您的问题。它已经很老了，有几年的帖子清单以前直到现在。

祝你好运！

Answer 2

我使用CSS为渐进式Web应用程序解决了类似的解决方案。

使用键盘时，屏幕的高度要低得多，因此可以利用CSS媒体查询来发挥自己的优势。示例：

@media(max-height:520px) {
    #bottom_menu {
        display:none;
    }
}

渐进式Web应用程序软键盘和导航栏在全屏

2 个答案: