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聊天框全屏根据浏览器高宽自适应的更多相关文章
- 关于Google圆角高光高宽自适应按钮及其拓展
关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...
- 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题
最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...
- textarea 在不同浏览器高宽不一致的兼容性问题
在html,很多同学喜欢使用rows.cols,来设置textarea的高宽,却发现,在火狐跟其他浏览器,好像高宽却不一致! 因为这是火狐的一个bug, https://bugzilla.mozill ...
- jQuery实现布局高宽自适应
在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要 ...
- Js操作DOM元素及获取浏览器高宽
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
- 关于Google 圆角 高光 高宽 自适应 按钮
最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...
- 纯CSS写九宫格样式,高宽自适应正方形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...
随机推荐
- dubbo-admin dubbo-monitor 安装
dubbo-admin: 因为我们不能直观的看到dubbo和zk上到底有什么服务(提供者),所以我们需要一个可视化工具来方便我们管理每一个服务和每一个节点.dubbo-admin 就是dubbo的管理 ...
- Cacti 抓取数据方式 安装spine
安装好cacti后首先要设置获取数据的方式 Cacti 获取数据的方式有两种,1.监控端的脚本(可以是php, shell, perl 或其他脚本)2.或者 snmp 协议获取. Cacti 会在固定 ...
- Axure实现抽奖转盘(二)
这个小应用主要用到了以下功能: 1.生成一个0-360之间的随机数,保存至变量: 2.旋转转盘到达指定角度,案例中为3-4圈(1080+变量): 3.转盘逐渐停止通过动画(缓慢退出)实现: 4.转盘停 ...
- 【Python3爬虫】一次应对JS反调试的记录
一.前言简介 在前面已经写过关于 JS 反调试的博客了,地址为:https://www.cnblogs.com/TM0831/p/12154815.html.但这次碰到的网站就不一样了,这个网站并不是 ...
- C#使用Environment.TickCount 自定义的定时器类
Environment.TickCount, 官网介绍:一个 32 位带符号整数,它包含自上次启动计算机以来所经过的时间(以毫秒为单位). *由于 TickCount 属性值的值是32位有符号整数,因 ...
- C#设计模式学习笔记:(19)策略模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/8057654.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第七个模式--策 ...
- HTML连载69-透视属性以及其他属性练习
一.透视属性 1.什么是透视 透视简单来说就是近大远小 2.注意点:一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素. 3.格式:perspective:数字px; 这里的数字代 ...
- Edge Chromium 中如何始终允许运行 Flash 内容
众所周知,由于 Adobe Flash 控件历史久远,积累了许多漏洞.早在2017年7月,Adobe就宣布了要在2020年底终止对 Flash 的支持.微软称其浏览器移除 Flash 插件的最后期限是 ...
- PMP--1.5 项目管理描述
项目所处的环境将影响每个项目管理过程的实施方式以及项目制约因素的优先顺序. 一. 管理一个项目的过程 管理一个项目通常包括(但不限于): 1. 识别项目需求 2. 处理相关方的各种需要.关注和期望 ...
- Linux服务器被入侵后的处理过程(转发阿良)
Linux服务器被入侵后的处理过程 突然,频繁收到一组服务器 ping 监控不可达邮件,赶紧登陆 zabbix 监控系统查看流量状况. 可见流量已经达到了 800M 左右,这肯定不正常了,马上尝试 ...