HTML Web应用程序：如何防止ios键盘显示在页面上方

Question

我一直在搜索几个小时，但什么都没找到。

我有一个Web应用，页面底部有一个粘滞按钮。

当我集中输入内容时，当键盘按下页面时，它在android上运行得非常好。

但是在ios上，键盘位于页面上方，这导致按钮被键盘隐藏。这是我的主要号召性用语，我不想隐藏它：P

是否有任何变通方法来获得与android在ios上相同的效果？

codepen：https://codepen.io/Pixelize/pen/rRKRBm

body, html { margin: 0; min-height: 100vh; display: flex;
flex-direction: column;}
.container {
  text-align: center;
  width: 100%;
  background: #ccc;
  flex: 1;
}

.btn button {
  background: blue; width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 30px;
  box-sizing: border-box;
}

<div class="container">
  <div>TITLE</div>
  <input type="text">
  <div class="btn">
    <button>SIGN IN</button>
  </div>
</div>

例如，这是两个gif：

ios：https://i.stack.imgur.com/s95at.gif

android：https://i.stack.imgur.com/6yjOB.gif