LayIM聊天框全屏根据浏览器高宽自适应

个人博客 地址:http://www.wenhaofan.com/article/20190410190628

问题

由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器调整高宽后不能正确的显示。

解决方法

1.重新渲染

在layim.js中找到popchat方法在底部添加

 window.onresize=function(){
layer.style(index, {
width: '100%'
,height: '100%'
}, true);
resizeChat();
}

这种有个缺点就是会有一瞬间的闪烁,因为重新渲染会比较费时    

2.根据窗口变化动态计算

这种方法相对于第一种来说体验就比较好,但是相比于第一种方法来说操作方便,由于只是给私单做的时候遇到了这个问题所以就直接选择了第一种,动态计算的具体操作只需要使用window.onresize监听窗口改变事件,然后copy layim.js中的resizeChat方法,修改其中的宽高计算,在window.onresize监听方法中调用即可

上一篇:JS代码实现的聊天框


下一篇:制作qq简易聊天框