为什么在移动设备上出现键盘时页面会向上移动？

如何解决为什么在移动设备上出现键盘时页面会向上移动？

有没有办法在购买键盘时停止页面滚动？目前，如果我点击搜索框，它会调出键盘并向上移动页面，从而隐藏移动设备上的标题。

    return (
     <container>
      <main>
      <div className="searchForm">
      <header>Products</header>
        <form>
          <input
            placeholder="Search for product"
            value={this.state.product}
            onChange={this.handleInputChange}
          />

          <footer>
          <p><a href="google.com"</a></p>
          </footer>
        </form>
      </div>
      </main>
     </container>
    );
  }
}

我查看了其他线程并尝试过，但没有成功。 类似的例子：CSS - Chrome Mobile - Page move up when keyboard appears