在移动项目开发中遇到了一个这样的问题，我这里用的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 () {// 把获取到的高度赋值给根divdocument.getElementById('app').style.height = `${height}px`;};},};
</script>