弹出键盘是，页面高度发生变化

问题描述

在Android手机上，页面的input输入框获取焦点的时候，页面高度发生变化，导致页面布局错乱。效果如图

input-error.png

解决方案

<!--在进入页面的时候获取页面高度-->
created () {
    this.clientH = document.documentElement.clientHeight
}
foucs() {
    <!--在input输入框获取焦点的时候 设置容器高度为视窗高度-->
    this.$refs.verify.style.height = this.clientH + 'px'
}

正确效果如图所示

input-correct.png

思考

最初页面使用vh设置高度，vh是根据根据视窗高度来进行计算的，下面是哪些情况下视窗高度会发生改变，可以参考
https://yuedu.baidu.com/hybrid/colofficial/ff82652a9a6648d7c1c708a1284ac850ad0204f1?fr=official