在移动项目开发中遇到了一个这样的问题，我这里用的flex布局，因为flex布局是根据页面宽高度进行变化的，因此，当底部弹出手机软键盘的时候，因页面高度变化导致页面因而变化。

解决办法：

我们只需要在app这个div初始化完成的时候，获取手机的屏幕高度，并将值赋给height就好了

<template>
  <div id="app">
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition name="router-fade" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    // 解决安卓手机调出来软键盘，屏幕背景被挤压的问题
    created() {
      // 获取当前可视区域的高度
      const height = document.documentElement.clientHeight;
      // 在页面整体加载完毕时
      window.onload = function () {
        // 把获取到的高度赋值给根div
        document.getElementById('app').style.height = `${height}px`;
      };
    },
  };
</script>