个人博客 地址: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. 关于Google圆角高光高宽自适应按钮及其拓展

    关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...

  2. 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题

    最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...

  3. textarea 在不同浏览器高宽不一致的兼容性问题

    在html,很多同学喜欢使用rows.cols,来设置textarea的高宽,却发现,在火狐跟其他浏览器,好像高宽却不一致! 因为这是火狐的一个bug, https://bugzilla.mozill ...

  4. jQuery实现布局高宽自适应

    在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要 ...

  5. Js操作DOM元素及获取浏览器高宽

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...

  6. 关于Google 圆角 高光 高宽 自适应 按钮

    最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...

  7. 纯CSS写九宫格样式,高宽自适应正方形

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  8. 微信小程序点击图片全屏

    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...

  9. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

随机推荐

  1. [redis读书笔记] 第二部分 sentinel

    1.sentinel的初始化,会制定master的IP和port,然后sentinel会创建向被监视主服务器的命令连接和订阅连接: -  命令连接是用来和主服务器之间进行命令通信的 - 订阅连接,用于 ...

  2. 06-HTML

    今日知识 1. HTML基本语法 2. 特殊符号表示 3.总结 HTML 1. Hyper Text Mark Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法,将各种不同空 ...

  3. 字符编码及字节串bytes类型

    1 字符编码简介 ASCII码:美国人发明并使用,用1个字节(8位二进制)代表一个字符,ASCII码是其他任意编码表的子集(utf-16除外). Unicode:包含和兼容全世界的语言,与全世界的语言 ...

  4. Day17-18前端学习之路——Javascript事件

    用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https:/ ...

  5. Failed to get convolution algorithm解决

    蒸腾了两天,终于搞定了 是cudnn版本的问题 更新cudnn的时候,首先要删除/usr/local/cuda-10.0/targets/x86_64-linux/lib路径下所有之前cudnn版本的 ...

  6. C# 多线程的阻塞和继续-ManaulResetEvent的使用

    在工作中,会遇到需要多线程处理相应的业务需求,最典型的包括Socket的通信. 多线程处理里,就会考虑到,哪个线程先运行,哪个线程后运行的情况. 这里我介绍一下,使用ManualResetEvent类 ...

  7. StarUML之一、UML的相关基本概念

    为什么用UML 项目需要,在项目开发实现前期进行框架技术设计(条条大路通罗马通罗马,画图或者写代码都可以,适合就可以!). 用户的交互我们通常用Axure(原型设计)体现, 框架和功能结构设计则用UM ...

  8. MySQL保存微信昵称中的特殊符号造成:(Incorrect string value: "xxxx'for column ‘name’ at row 1)异常

    今天有业务员反应,编辑某个用户的信息的时候出现了异常,异常信息如下: Incorrect string value: "xFOx9Fx92x9D vxE6..'f or column 'na ...

  9. lua学习之深入函数第一篇

    深入函数第一篇 函数是第一类值,具有特定的词法域 第一类值 第一类值的意思是函数与 lua 中的其他类型如数字,字符串具有相同的权力 函数可以存储到全局变量或局部变量变量,还可以存储到 table 中 ...

  10. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...