个人博客 地址: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. [CentOS7 mini]Linux命令补全 yum install bash-completion

    CentOS7 mini默认不带命令补全需要自行安装 使用国内yum清华源 安装完后退出当前窗口再登录生效 # yum install -y bash-completion 已加载插件:fastest ...

  2. 文本段落缩进text-indent:2em

    中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现: p{text-indent:2em;} <p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobe ...

  3. linux中目录处理命令

    目录 mkdir cd pwd rmdir cp mv rm mkdir 解释 命令名称:mkdir 命令英文原意:make directories 命令所在路径:/bin/mkdir 执行权限:所有 ...

  4. 在Docker中运行SpringBoot程序

    1.将SpringBoot项目中pom.xml的build插件更换为: <build> <plugins> <plugin> <groupId>org. ...

  5. npm下载文件临时目录、实际存放目录路劲

    npm 下载文件临时存放目录 路劲:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules ( C:\Users\dihongwanyan\AppData\R ...

  6. clr via c# delegate

    1,委托列子 internal delegate void Feedback(int value); class DelegateRef { public static void StaticDele ...

  7. Html介绍,了解html代码的注释

    什么是代码注释?在代码编辑器中的注释代码是不会在浏览器窗口展示的!html代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你之前编写的代码,很快可以想起这个代码的用途.代码注释不仅方便程序员 ...

  8. vue更改数组中的值

    根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.pus ...

  9. Java对象拷贝备忘

    列举 //cglib net.sf.cglib.beans.BeanCopier.create net.sf.cglib.beans.BeanCopier.copy //spring-beans or ...

  10. 迅雷X v10.1.29.698-免安装SVIP去广告精简版+骨头版+便携版+手雷+Mac精简版

    迅雷X 10.1版本开始,采用Electron软件框架完全重写了迅雷主界面.使用新框架的迅雷X可以完美支持2K.4K等高清显示屏,界面中的文字渲染也更加清晰锐利.新框架的界面绘制.事件处理等方面比老框 ...