键盘以全屏模式覆盖内容（Chrome Mobile）

Question

在我们的HTML聊天应用程序中，用户应该有机会进入全屏模式以隐藏导航栏并获得更好的用户体验。我们有一个简单的布局：

<div id="chat">
  <div id="header"></div>
  <div id="messages"></div>
  <div id="write">
    <input type="text" placeholder="Your message..."/>
  </div>
</div>

我们的布局是灵活布局：

#chat {
 display: flex;
 flex-direction: column;
}

#header {
 height: 60px;
}


#messages {
 flex: 2;
}

#write {
 height: 60px;
}

如果我们转到全屏并单击文本输入字段，键盘将打开并覆盖大部分内容。因此，用户无法看到他正在输入的单词。没有全屏模式，一切正常。

我们在“body”元素上请求全屏：

$("body").requestFullscreen();

此问题是否有解决方法/修复方法？