JavaScript ------ 获取浏览器缩放比例,若不是100% ,给出提示
原由:弹窗问题,不再当前页面内展示的数据,弹窗弹不出来,而且只要前面的弹出来,后面的也可弹出来了
多方测试以为与浏览器的滚动条有关
最后,偶然发现和浏览器的缩放有关系,当浏览器缩放比例为100% 的时候,未在当前页面展示的数据,可以弹出,而不在此范围的不行
而通过js 又禁止不了浏览器缩放,故通过js 进行设置,如果浏览器缩放比例不是 100% 给出提示。
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> // 判断pc浏览器是否缩放,若返回100则为默认无缩放,如果大于100则是放大,否则缩小 function detectZoom (){ 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); } return ratio; }; //window.onresize 事件可用于检测页面是否触发了放大或缩小。 $(function(){ //alert(detectZoom()) }) $(window).on('resize',function(){ isScale(); }); //判断PC端浏览器缩放比例不是100%时的情况 function isScale(){ var rate = detectZoom(); if(rate != 100){ //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0 console.log(1) alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!') //var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5 } } //阻止pc端浏览器缩放js代码 //由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况,只能通过js来控制了 // jqeury version $(document).ready(function () { // chrome 浏览器直接加上下面这个样式就行了,但是ff不识别 $('body').css('zoom', 'reset'); $(document).keydown(function (event) { //event.metaKey mac的command键 if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){ event.preventDefault(); } }); $(window).bind('mousewheel DOMMouseScroll', function (event) { if (event.ctrlKey === true || event.metaKey) { event.preventDefault(); } }); }); </script>
防止页面body 内容受到浏览器缩放影响,js 的 zoom 属性
<script> window.onload = function() { document.body.style.zoom = "normal"; //避免zoom尺寸叠加 let scale = document.body.clientWidth / 1904; document.body.style.zoom = scale; }; //防抖,避免resize占用过多资源 (function() { var throttle = function(type, name, obj) { obj = obj || window; var running = false; var func = function() { if (running) { return; } running = true; requestAnimationFrame(function() { obj.dispatchEvent(new CustomEvent(name)); running = false; }); }; obj.addEventListener(type, func); }; throttle("resize", "optimizedResize"); })(); window.addEventListener("optimizedResize", function() { document.body.style.zoom = "normal"; let scale = document.body.clientWidth / 1904; document.body.style.zoom = scale; }); </script>