JavaScript |
您所在的位置：网站首页 › 谷歌网页界面显示比例怎么设置 › JavaScript |
|
原由：弹窗问题，不再当前页面内展示的数据，弹窗弹不出来，而且只要前面的弹出来，后面的也可弹出来了 多方测试以为与浏览器的滚动条有关 最后，偶然发现和浏览器的缩放有关系，当浏览器缩放比例为100% 的时候，未在当前页面展示的数据，可以弹出，而不在此范围的不行 而通过js 又禁止不了浏览器缩放，故通过js 进行设置，如果浏览器缩放比例不是 100% 给出提示。 // 判断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(); } }); });防止页面body 内容受到浏览器缩放影响，js 的 zoom 属性 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; });
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |