当前位置: 首页 - 编程技术 - 文章正文

浏览器固定缩放比例

xiaoqihv

1、看了好多博客,都是以下面代码为准

<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')) { //检测IE浏览器的版本 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 事件可用于检测页面是否触发了放大或缩小。 $(window).on('resize',function(){ isScale(); }); //判断PC端浏览器缩放比例不是100%时的情况 function isScale(){ var rate = detectZoom(); /**if(rate != 100){ //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0 alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!') }*/ if(rate < 100){ //document.getElementsByTagName('body')[0].style.zoom=3; //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0 //alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!') if(rate > 90 && rate <= 99){ document.getElementsByTagName('body')[0].style.zoom = 1.2; console.log("当前页面显示在90到99之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); }else if(rate > 80 && rate <= 89){ document.getElementsByTagName('body')[0].style.zoom = 1.4; console.log("当前页面显示在80到89之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); }else if(rate > 70 && rate <= 79){ document.getElementsByTagName('body')[0].style.zoom = 2; console.log("当前页面显示在70到79之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); }else if(rate > 60 && rate <= 69){ document.getElementsByTagName('body')[0].style.zoom = 1.8; console.log("当前页面显示在60到69之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); }else if(rate > 50 && rate <= 59){ document.getElementsByTagName('body')[0].style.zoom = 2.6; console.log("当前页面显示在50到59之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); }else if(rate > 40 && rate <= 49){ document.getElementsByTagName('body')[0].style.zoom = 2.7; console.log("当前页面显示在40到49之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); }else if(rate < 39){ document.getElementsByTagName('body')[0].style.zoom = 3.7; console.log("当前页面显示在39之间"); console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); } }else { console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom); //document.getElementsByTagName('body')[0].style.zoom = 0; } } //阻止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>

但实际上还是需要用户手动修改,不能达到需求。

2、通过下面方法可以固定,但缩放时页面会有细微变化,不过不影响大致功能

//window.onresize 事件可用于检测页面是否触发了放大或缩小。$(window).on('resize',function(){ pageFixedSize()}); function pageFixedSize() { var height = $(window).height(); $('body').css('zoom', height / 720);}

 

文章地址:https://wenmayi.cn/post/693.html