JS代码查看浏览器页面放大比例

JS代码查看浏览器页面放大比例

在做前端项目的时候会遇到这样的问题，比如说我适配的 1920*1080 100% 缩放比例，在这种情况下页面的布局展示都是OK的，但是如果用户自行修改缩放比例，那么这个页面可能会出现一些小的问题，比如错版和展示不开显示滚动条的问题，所以说我们可以在最开始的时候来使用JS代码检测一下用户有没有采用100%的比例展示页面，如果进行了缩放，检测缩放的比例是多少，可以提醒用户使用100%的缩放比例体验最好的页面效果。

主要的就是一段简单的JS代码：

// 检测浏览器缩放比例
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;
};
let result = detectZoom()
// 打印用户的缩放比例
console.log(result);

以上代码就是检测用户电脑缩放比例的代码，如果打印输出为100，则表示用户使用100%的缩放展示，表示用户没有进行缩放操作，如果现实125，则表示用户采用了125%的比例放大了现实效果。windows系统默认推荐采用125%的比例放大现实，所以算是个坑吧。