移动端虚拟键盘和fixed的坑

这两天接手一个新需求，做一个直播间的页面，用于微信平台。

需求

页面的设计稿要求 头部和底部置顶，底部有输入框，中间部分为显示内容的区域，可滚动

问题

• 虚拟键盘弹起时，fixed样式失效

• 无法监听虚拟键盘弹起、关闭状态

解决方案

1.用absolute和relative代替fixed

1.在键盘弹起的时候，将头部定位成relative，底部定位为absolute，但是此时底部的bottom:0是相对屏幕高度来说的，也就是说当屏幕滑动时，底部也会滚动

2.使用iscroll.js

JS代码

iscroll-js.png

页面代码结构

iscroll.png

3.微信设置

这是向同事请教的一个办法，微信可以设置虚拟键盘弹起的时候，不改变页面的样式，但是此种方案只适用于微信， 百度相关链接
将我们的域名添加进去，在微信端打开的时候就不会再重新布局了，不知道这个解决办法是否可行，因为第二天打开的时候，发现并没有出现所预期的效果，还是被重新布局了

4.监听虚拟键盘

虚拟键盘的弹起和关闭状态，可以用resize()来进行监听，当然，屏幕旋转的时候也会触发这个方法，此时就需要自己做判断控制。