Loading... > ## 今天在一个群里面看到一个朋友问了一个问题,浏览器缩放125%后样式错误,问怎么解决 我给他讲移动端设置meta标签 `user-scalabel=0`即可 但是他说他是pc端的 于是乎我想 既然会变形 而且没有特殊需求 pc端直接给你禁止缩放不就完了 但是好像没有能禁止缩放的操作 但是但是 又可以这样搞 当你浏览器缩放的时候 让body标签同步缩放 比如 当浏览器缩放200%的时候 这个时候body zoom等于0.5 也就能实现不缩放的操作了 > 100 / 200 = 0.5 上代码 ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>浏览器禁止缩放(同步缩放实现禁止缩放操作)</title> <style type="text/css"> </style> </head> <body> <span>茶白</span> </body> </html> <script type="text/javascript" src="/jquery-3.4.1/jquery-3.4.1.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() { isScale(); //alert(detectZoom()) }) $(window).on('resize', function() { isScale(); }); //判断PC端浏览器缩放比例不是100%时的情况 function isScale() { var rate = detectZoom(); $("body").css("zoom", 100 / rate) if (rate != 100) { } } </script> ``` 最后修改:2022 年 03 月 07 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏