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

BUG描述

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

解决思路

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

代码实现

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

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

你可能感兴趣的