移动端兼容：手机端唤起键盘时fixed布局发生改变

BUG描述

在做移动端H5页面时，当出现input元素，唤起键盘时，如果没有对一些样式进行特别的调整，很容易导致布局错位。今天遇到了一种情况，是fixed布局的元素，而且其高度是用百分比设置的。当键盘唤起时，高度就会发生变化，导致两个fixed布局的元素发生重叠。

解决思路

键盘唤起时，百分比的参照高度也发生了变化，原来是屏幕高度，现在变成了屏幕高度-键盘高度。如此一来，元素的高度会缩小。如果页面上还有另外的固定高度的元素，就有可能发生重叠。所以，我们要在键盘唤起之前就把所有的高度定死，在渲染页面时先获取屏幕可视区域的高度，再乘以百分比得出固定高度。这样一来，键盘唤起时也不会把元素往上顶。

代码实现

这里用vue实现，其他的框架也是同样的思路.
这里只展示一个元素的写法，实际中肯定是不止一个元素才会发生重叠。那就把这些元素的height和top都这样设置就好了。

<div class="scroll_block" :style="{ height:scrollHeight, top: scrollTop }">
</div>

<script>
export default {
    data() {
        return {
            scrollHeight: '52%',
            scrollTop: '25%',
        }
    },
    created() {
        this.fixedLayout()
    },
    methods: {
        fixedLayout() {
          let viewHeight = window.innerHeight
          this.scrollHeight = Number(viewHeight) * Number(52) / Number(100) + 'px'
          this.scrollTop = Number(viewHeight) * Number(25) / Number(100) + 'px'
        },
    }
}
</script>

在这里，最关键的就是fixedLayout函数，先获取window.innerHeight，再乘以百分比得出元素的固定height和top。