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 ...
随机推荐
- ubuntu下安装secureCRT(含破解方法)
一.下载SecureCRT安装文件及破解文件: 链接: https://pan.baidu.com/s/1A7opflFKSUi13PkzVCnhDQ 密码: gbf5 二.下载完成安装文件后安装Se ...
- sparc v8 stack frame calling convention
main.c ; int main() { int a, b; int sum; a = ; b = ; sum = add(a, b); ; } int add(int a, int b) { in ...
- LDAP安装
一.介绍 LDAP 全称:Lightweight Directory Access Protocol,即“轻量级目录访问协议”. LDAP目录以树状的层次结构来存储数据.如果你对自顶向下的DNS树或U ...
- hadoop简介和环境
Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. Hadoop实现了一个 ...
- 1213 - Fantasy of a Summation
1213 - Fantasy of a Summation If you think codes, eat codes then sometimes you may get stres ...
- 【转载】Java的Vector,ArrayList,LinkedList
首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存放多个元素,能够维护元素的次序,并且允许元素的重复.3个具体 ...
- [译]Android Studio 3.6 新特性概览
设计 设计编辑器 设计编辑器(比如布局编辑器和导航编辑器)现在提供了一个拆分视图模式,能够同时查看 UI 界面的 Design 视图和 Code 视图.拆分视图取代并改进了早期的预览窗口,并且可以对每 ...
- css—动画(transform, transition, animation)
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- C# 根据天、周、月汇总统计生成统计报表
先看核心代码: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset ...
- UML之二、建模元素(1)
本章介绍UML建模元素 1:Stereotype-也被称为类型.构造型 UML里的元素扩展,简单来说其功能就是在已有的类型上添加一些标记,类似于打个戳,从而生成新的东西. 简单的说加一句话来更加清楚准 ...