JQuery 检测浏览器放大缩小
2016-04-05 18:03
639 查看
</pre><p>参考其他人的JS方法后整理的</p><p></p><p>调用方法</p><pre code_snippet_id="1635319" snippet_file_name="blog_20160405_2_620393" name="code" class="html"><span style="white-space:pre"> </span>detectZoom($($("body").children().get(0))); $(document).keydown(function(e){ if( (e.ctrlKey == true && e.keyCode == 48) || (e.ctrlKey == true && e.keyCode == 96) ){ deleteHintbar(); } });
实现方法
function detectZoom (event){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ratio = Math.round(ratio * 100); } if(ratio!=100){ var html = '<div class="gb-hintbar" id="gb-hintbar"> <div class="inner"> <div class="hintbar-txt">您的浏览器目前处于<span id="hintbar-txt">缩放</span>状态,会导致页面显示不正常,您可以键盘按"ctrl+数字0"组合键恢复初始状态。</div> </div> <a title="点击退出" id="deleteHintbar" class="text-close" href="javascript:;" onclick="deleteHintbar()">×</a></div>'; event.before(html); } }; function deleteHintbar(){ $("#gb-hintbar").empty(); }
css 样式
.gb-hintbar { background: #fff2d1 none repeat scroll 0 0; color: #a0441d; font-size: 14px; overflow: hidden; position: relative; z-index:99999; } .gb-hintbar .inner { height: 39px; margin: 0 auto; /* padding: 21px 0 0 40px; */ padding: 11px 0 10px 40px; width: 902px; } .gb-hintbar .inner a { text-decoration: underline; } .gb-hintbar .text-close { color: #a0441d; position: absolute; right: 10px; text-decoration: none; top: 8px; }
相关文章推荐
- 使用jquery设置HTML中<select>标签的值
- 献给和我合作的过得前端童靴们:jquery源码分析--序4
- JQueryEasyUi学习笔记
- jquery 离开页面提示信息
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
- 沈大海38节jquery强化教程2016视频下载
- jquery1.6中的.prop()和.attr()异同
- 深入理解jQuery插件开发
- jquery Deferred 快速解决异步回调的问题
- jQuery组件系列:封装标签页(Tabs)
- jquery treetable 实例
- jquery-barcode:js实现的条码打印
- 可编辑的jquery表格插件
- jquery中eq和get的区别与使用方法
- JQuery-01
- CSS中:nth-child和JQuery:eq的区别
- 用jQuery设置href内容为空点击删除一行
- JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画
- jQuery总结
- jQuery滚动到页面指定位置