安卓手机软键盘弹起的问题

现如今很多API对于安卓系统，iOS系统有些会兼容，有些不兼容。就拿软键盘弹起的问题来说吧，如果一个系统上面有一个输入框，底部有个按钮(前提按钮用了position:fixed)，当我用安卓手机点击输入框的时候，底部的按钮很往上顶；而iOS系统的手机则不会这样。分析了一下，安卓手机把软键盘以上的视为可视窗口，iOS系统的手机可视窗口还是原来的。解决方案如下：

<div class="btn" v-if="isShow">
      <span @click="submitFn()">提交</span>
</div>

我给这个按钮一个显示隐藏，当安卓手机原来的可视窗口高度大于软键盘弹起的可视窗口高度，我就让这个按钮隐藏起来，否则的话就显示。

在data中定义两个变量:

data() {
    return {
        isShow: true,
        documentHeight: document.documentElement.clientHeight,  // 默认屏幕高度
    }
}

在mounted里面调用 window.onresize()这个方法，如下:

mounted() {
    window.onresize = () => {
      const that = this;
      if (that.documentHeight > document.documentElement.clientHeight) {
        // 如果默认屏幕高度大于当前的屏幕高度
        that.isShow = false;
      } else {
        that.isShow = true;
      }
    };
  },

然后在注销window.onresize()这个方法

beforeDestroy() {
    window.onresize = null;
},

这样就解决了我们的问题---安卓手机软键盘弹起影响布局。

顺带说一句，有些样式用了"vh"的话，安卓手机软键盘弹起，这些样式也会造成影响。