html5分辨率异常自动检测

21年2月份没有回家过年的时候再租的房子里没事就弄了一个这个，本人对前端知识不是很了解基本都是查资料弄的
页面代码：

<a href="javascript:tips_pop();" id="silu" style="display: none" class="arktitle" title="点击查看">系统检测到分辨率异常</a>
<div id="winpop" style="display: none"><div class="title"><span>异常信息<span class="close"οnclick="tips_pop()" title="关闭">X</span></span></div><div style="font-size: 13px;margin: 5%;color: grey;font-weight: bold;text-align: center">经系统检测<br/>你的屏幕分辨率为 <span id="text"></span><br/>建议使用分辨率为 1920*1080<br/><br/><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger" οnclick="setResolution();">设置分辨率</a><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" οnclick="noLoginCancel();">不设置</a></div>
</div>

js代码

     var w=screen.width;var h=screen.height;document.getElementById('winpop').style.height='0px';window.οnlοad=function(){//加载closeWaiting()if(w!=1920 && h!=1080){$("#silu").attr("style","");}else{$("#silu").attr("style","display:none");}}function setResolution() {layer.msg('<span style="font-size: 12px"><span style="font-weight: bold;font-size: 15px">windows 7操作系统：</span><br/>桌面鼠标右键 在下拉菜单中点击“屏幕分辨率”；<br/><span style="font-weight: bold;font-size: 15px">windows 10操作系统：</span><br/>桌面鼠标右键 在下拉菜单中点击“显示设置”；<br/><span style="font-weight: bold;font-size: 15px">分辨率：</span><br/>建议选择 1920*1080 分辨率<br/>可对网页进行缩放达到全屏效果 缩放页面快捷键：<br/>Ctrl +，Ctrl -，可按住Ctrl使用鼠标滚轮进行缩放。<br/></span>', {time: 200000000, //200000s后自动关闭icon: 7,btn: ['知道了']});}function noLoginCancel() {layer.msg('为了您更好的体验可对网页进行缩放达到全屏的效果。<br/>缩放页面快捷键：<br/>Ctrl +，Ctrl -，按住Ctrl使用鼠标滚轮进行缩放。<br/></span>', {time: 200000000, //200000s后自动关闭icon: 6,btn: ['知道了']});}function tips_pop(){document.getElementById("text").innerText=w+"*"+h;var MsgPop=document.getElementById("winpop");var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字if (popH==0){MsgPop.style.display="block";//显示隐藏的窗口show=setInterval("changeH('up')",2);}else {hide=setInterval("changeH('down')",2);}}function changeH(str) {var MsgPop=document.getElementById("winpop");var popH=parseInt(MsgPop.style.height);if(str=="up"){if(popH<=150){MsgPop.style.height=(popH+4).toString()+"px";}else{clearInterval(show);}}if(str=="down"){if(popH>=4){MsgPop.style.height=(popH-4).toString()+"px";}else{clearInterval(hide);MsgPop.style.display="none"; //隐藏DIV}}}

publics.css

#winpop { width:200px; height:0px;position:absolute; right:1%; bottom:0; border:1px solid #666; margin:0;padding:1px; overflow:hidden; display:none;background-color: rgb(255, 255, 255)}
#winpop .title { width:100%; background: #ff5100; font-weight:bold; text-align:center;font-size:12px;color: white;padding: 7px}
/*#winpop .con { width:100%; height:90px;line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-align:center} !* http://www.webdm.cn *!*/
#silu { width:200px;font-size:12px; color:white;position:absolute; right:1%; text-align:right;bottom:0; text-decoration:underline;line-height:20px;background: rgba(255, 81, 0, 0.66);text-decoration: none;text-align: center;}
.close { position:absolute; right:14px; color:#FFF; cursor:pointer;}.arktitle {background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;animation: blink 2s linear infinite;-webkit-animation: blink 2s linear infinite;-moz-animation: blink 2s linear infinite;-ms-animation: blink 2s linear infinite;-o-animation: blink 2s linear infinite;
}
@keyframes blink{0%{opacity: 1;}50%{opacity: 0.5;}100%{opacity: 0.8;}
}
@-webkit-keyframes blink {0% { opacity: 1; }50%{ opacity: 0.5;}100% { opacity: 0.8; }
}
@-moz-keyframes blink {0% { opacity: 1; }50%{ opacity: 0.5; }100% { opacity: 0.8; }
}
@-ms-keyframes blink {0% { opacity: 1; }50%{ opacity: 0.5; }100% { opacity: 0.8;}
}
@-o-keyframes blink {0% { opacity: 1; }50%{ opacity: 0.5; }100% { opacity: 0.8; }
}

如果检测你的分辨率不是1920*1080那么右下角就会有一个一闪一闪的条，点击后就会弹窗，点击不设置则会自动关闭

可能有部分遗漏的地方如果有的话告诉我我补上去

html5分辨率异常自动检测相关推荐

优酷技术实践：自动检测及修复视频播放异常
音视频播放器的工作内容可以描述为:根据流媒体协议还原音视频内容的过程.在还原的每个阶段都存在丢失精度的风险,而最终呈现的结果也是一个主观的内容,这就给播放器输出结果的评估引入了一些痛点问题. 作者| ...
工业农业消防自动检测及报警云方案
自动检测及报警云方案 V1.0.0 Sep.16 2017 文档管理信息表主题自动检测及报警云方案版本 V1.0.0 内容自动检测及报警云方案关键字云平台,物联网,远程监测创建时间 2 ...
006基于近似熵、递归量化分析和卷积神经网络的癫痫发作自动检测-2019
Automatic Detection of Epileptic Seizure Based on Approximate Entropy, Recurrence Quantification Ana ...
008CHB-MIT脑电图数据库对儿童癫痫发作自动检测的调查-2021
Automated Epileptic Seizure Detection in Pediatric Subjects of CHB-MIT EEG Database-A Survey 本文通过分析脑 ...
AOI光学自动检测技术 | 基本原理与设备构成
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达一,引言: AOI(automatically optical i ...
基于EEG的癫痫自动检测: 综述与展望
目录摘要 1. 癫痫自动检测流程 1.1 数据采集与输入 1.2 数据预处理 1.3 特征提取与选择 1.4 分类模型学习与评估 2. 癫痫自动检测中的特征 2.1 时域特征 2.2 频域特征 2. ...
两款自动检测代码工具与插件，开源真香
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员写完代码最麻烦的是什么?就是运行时出现bug再回头去改去修,如果有一款检测工具,能自动检测出代码中是否存在bug是不是对开发者来说,更 ...
LINUX检测服务并自动运行,一种Linux下的开机自动检测硬件信息的方法与流程
技术领域本发明涉及服务器开机检测技术,具体的说是一种Linux下的开机自动检测硬件信息的方法. 背景技术: 服务器产品研发初期,产品多为工程样本,问题很多,这些问题中硬件问题占较大部分.在工程验证测试 ...
自动检测iOS网络并可跳转至设置界面设置网络
首先在gitHub下载一个三方文件https://github.com/tonymillion/Reachability.导入 #import "Reachability.h" 若 ...
实现BUG自动检测 - ASP.NET Core依赖注入
我个人比较懒,能自动做的事绝不手动做,最近在用ASP.NET Core写一个项目,过程中会积累一些方便的工具类或框架,分享出来欢迎大家点评. 如果以后有时间的话,我打算写一个系列的[实现BUG自动检测 ...

html5分辨率异常自动检测

html5分辨率异常自动检测相关推荐

最新文章

热门文章