【Vue】13.解决安卓手机上调出软键盘，屏幕背景被压缩的问题

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

解决办法：

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

<template>
  <div >
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <router-view v-if="$"></router-view>
      </keep-alive>
    </transition>
    <transition name="router-fade" mode="out-in">
      <router-view v-if="!$"></router-view>
    </transition>
  </div>
</template>

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