手机edge浏览器弹出键盘后，背景高度没变并且还能滑动，怎么解决呢？

Question

如图，问题本身很简单，但试了很久不知道怎么解决：

整个页面，仅仅设置了html背景色，放了一个input，然后手机edge浏览器打开，现在页面是占满的不能上下滑动

但是，点击input，弹出输入法键盘后，背后的页面高度没变，而且还能上下滑动（可见有滚动条出现）：

怎么才能在弹出输入法键盘的时候，背后页面高度自动缩小到适应可视区高度，并且不可滑动呢？

（注：目前仅在手机edge浏览器发现该问题）

Answer 1

两天了，终于解决这个问题了。。。
解决的方法，到头来也很简单，先用一个大盒子把东西包起来：

<div class="frame">
  <input type="text"/>
</div>

然后设置body的样式为：

body {
  overflow: hidden;
  touch-action: none;
}

现在，.frame的高宽再大都无法滚动了
（是的就是这么简单T_T，哭了）

————————————

忘记补充了，键盘弹出后自适应高度这个是比较简单的，每次resize都把高度设置为visualViewport.height即可

————————————

我的天呐，大的bug解决了小的bug还在……键盘出现的时候，手指拖动一些本来就没法scroll的地方，确实是不会滚动了，但是！！！当你拖动输入框这种可以scroll（只要你css允许它scroll）的东西本身，还是会把整个页面上下拖动！！！有谁能彻底解决这个问题吗？？