javascript - 如何解决安卓手机生成键盘导致我的屏幕被推送的问题？

Question

遇到手机导致的布局错误！我有一个页面是表单，设置是这样的！当用户使用安卓手机时，输入名称时会弹出手机键盘。这时候整个屏幕会被键盘推上去，不能拉下来让用户继续填写。但是在iOS手机上是正常的，因为iOS手机键盘会覆盖我的屏幕不会造成屏幕推动。不知道有没有人解决过这个问题。我在 Internet 上看到了一些 javascript 解决方案。我可以通过 CSS 解决问题吗？

如果这个问题还需要javascript，希望大家能告诉我一些简单的方法，因为我的javascript能力有点差，谢谢大家的帮助！

.demo{
  background-color: #f9cf5a;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display: flex;
  justify-content:center;
  align-items:center;
}

.form{
  background-color: #0ecaf9;
  width: 400px;
  height: 500px;
  border-radius:70px 180px 90px 80px;
}

.content{
  height: 100%;
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

<div class="demo">
  <div class="form">
    <div class="content">
        name:
        <input type="email" placeholder="name" ><br>
        phone:
        <input type="tel" placeholder="name" >
    </div>
  </div>
</div>

标签： javascriptandroidhtmljquerycss