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监听方法中调用即可

巴特西

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

问题

解决方法

1.重新渲染

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

最新文章

热门文章