JavaScript detection of browser zoom status implementation code_javascript skills

The zoom mentioned here does not refer to the zoom of the browser size, but refers to the percentage zoom of the browser web page content (press the Ctrl and key or - key to zoom).
There are many ways to detect this zoom. QQ Space uses flash to detect whether the browser is zooming. Here is a javascript method to detect browser zoom.
For IE6, just ignore it, because IE6 can only zoom text.
Let’s first talk about the standard detection interface provided by the browser. window.devicePixelRatio is the ratio of physical pixels on the device to device-independent pixels. This attribute can be used to detect whether the web page has been scaled. On normal PC browsers, the default value is 1 with no scaling by default. Currently, Firefox, chrome, etc. are well supported.
Okay, now it’s time to talk about how IE handles this. IE provides two properties, window.screen.deviceXDPI and window.screen.logicalXDPI. deviceXDPI corresponds to the physical pixels on the device, and logicalXDPI corresponds to the proportion of independent pixels on the device. It is estimated that the standard detection interface is only an improvement based on the IE method. The default value of these two properties on systems above Windows XP is 96, because the system default is 96dpi.
For browsers that support neither of the above, you can also use the window.outerWidth and window.innerWidth properties. outerWidth returns the actual outer width of the window element, and innerWidth returns the actual inner width of the window element. Both widths include the width of the scroll bar.
With these attributes, you can basically handle common browsers on PC browsers. The implementation code is as follows:

If the return value of the detectZoom function is 100, it is the default zoom level, if it is greater than 100, it is zoomed in, and if it is less than 100, it is zoomed out.

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;
};

Original article, please indicate when reprinting: Reprinted from Front-end development