I encountered a layout error caused by a mobile phone! I have a page that is a form, and the settings are like this! When the user uses an android phone, the phone keyboard will pop up when entering the name. At this time, the entire screen will be pushed up by the keyboard and cannot be pulled down for the user to continue filling in. However, it is normal on an iOS phone, because the iOS phone keyboard will Covering my screen will not cause screen pushing. I don’t know if anyone has solved this problem. I have seen some javascript solutions on the Internet. Can I solve the problem through CSS?

If this problem still requires javascript, I hope you can tell me some simple ways, because my javascript ability is a bit poor, thank you for your help!

.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>