1：解决移动端软键盘弹起底部固定布局被顶上去问题

在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部，但如果页面上有input或textarea被点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去，有时会十分影响美观，下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的

实现步骤

1. 在mounted中添加对resize屏幕变化监听并获取到屏幕原始高度
2. 在watch中添加对data中定义的屏幕高度的监听
-----------2.1：小于原始高度底部布局就隐藏，否则就显示
3. 在beforeDestroy中删除对resize屏幕变化的监听

完整代码

<template>
    <div class="wrapper">
        <input type="text" class="input">
        <span class="btn" @click="btnClick" v-show="isShow">跳转下一步</span>
    </div>
</template>

<script>
    export default {
        name: "Demo",
        data() {
            return {
                originalHeight: 0, //原始高度
                screenHeight: 0, //实时高度
                isShow: true,
            }
        },
        mounted() {
            //首次进入的原始高度
            this.originalHeight = document.documentElement.clientHeight;
            window.addEventListener('resize', this.watchResize);
        },

        beforeDestroy() {
            window.removeEventListener("resize", this.watchResize);
        },

        watch: {
            screenHeight(newHeight) { //监听屏幕高度变化
                this.isShow = this.originalHeight <= newHeight;
            }
        },

        methods: {
            watchResize() {
                //实时变化的窗口高度
                this.screenHeight = document.documentElement.clientHeight;
            },

            btnClick() {
                this.$router.push({
                    path: "/home2"
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background: #eee;
        .input {
            display: inline-block;
            height: 60px;
            margin: 10px;
            border: 2px solid #00ff00;
        }
        .btn {
            position: fixed;
            left: 50%;
            bottom: 3%;
            margin-left: -150px;
            width: 300px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: chocolate;
        }
    }
</style>

注意事项

1：在项目中如果使用window.onresize的方式对屏幕进行监听时，则这种监听是全局的监听，如果不注销则对其他页面屏幕的变化也会进行监听，所以必须在beforeDestroy中进行注销

    mounted() {
        window.onresize = () => {
            this.screenHeight = document.documentElement.clientHeight;
        };
    },

    beforeDestroy() {
        window.onresize = () => {}
    },

2：通过addEventListener方式对resize进行监听，通过手机验证如果不注销也不会影响其他页面，但是最好我们都写上

2：解决安卓手机上调出软键盘，屏幕背景图被压缩的问题

在Vue项目的App.vue类中添加如下代码：

	<script>
	    export default {
	        name: "app",
	        created() {
	            var height= document.documentElement.clientHeight; //获取当前可视区域的高度
	            window.onload = function(){ //在页面整体加载完毕时
	                document.getElementById('app').style.height= height + 'px'//给根布局设置高度
	            }
	        }
	    }
	</script>

vue代码：

    <div class="wrapper" id = "demo">
        <input type="text" class="input">
    </div>

    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../public/static/images/demo.png") no-repeat center;
        background-size: cover;
        }

这样设置后，当软键盘弹起时，如果未遮挡获取焦点的元素，则背景图不会动，如果软键盘遮挡了获取焦点的元素，则背景图和图上的元素都会整体往上移动，而不会对背景图进行压缩。

注意事项

1: 有时候我们想直接在vue代码中直接控制最外层标签的高度不就可以吗，这样也不用全局设置了，如

	created() {
	            this.originalHeight = document.documentElement.clientHeight;
	            window.onload = function () { //加不加window.onload都是不可以的
	                document.getElementById('demo').style.width = '100%'; //不会生效，而宽度由内部标签撑开
	                document.getElementById('demo').style.height = this.originalHeight + 'px'; //不会生效，而高度由内部标签撑开
	                document.getElementById('demo').style.background = "url('static/images/demo.png') no-repeat center";
	                document.getElementById('demo').style.backgroundImage = "cover";
	            }
	        },

样式为：

    .wrapper {
        position: relative;
        }

实践证明这样是不可以的，虽然originalHeight获取到的是可视区的大小，但是把高度设置给最外层标签后并不会生效，而是最外层标签的高度和宽度都是由其内部标签高度和宽度决定的。如图加不加window.onload都是不可以的。

2: 我们能不能在代码中设置id为app标签的高度呢？如

	created() { //注意这里设置高度不加 window.onload  (加上就不可以了)
	            this.originalHeight = document.documentElement.clientHeight;
	            document.getElementById('app').style.height = this.originalHeight + 'px';
	        },

	vue代码：（其实和上面一样）
    <div class="wrapper" id = "demo">
        <input type="text" class="input">
    </div>

    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../public/static/images/demo.png") no-repeat center;
        background-size: cover;
        }

这种方式是可以的，但这种方式设置后也是全局的，也就是对所有页面都会生效，如果你偏要只在当前页面有效的话，那可以在适当的位置再重置根布局高度，如：

document.getElementById('app').style.height = 'auto';