The scaling mentioned here does not refer to the browser size scaling, but rather to the percentage scaling of the browser web content (press the Ctrl and the + sign keys or the - sign keys).
There are many ways to detect this kind of scaling. QQ space uses flash to detect whether the browser is scaling. Here is a JavaScript method to detect the browser's scaling.
For IE6, I just ignore it because IE6 can only scale 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 and independent pixels of the device. This attribute can be used to detect whether the web page is scaled. On a normal PC browser, the default value is 1 if there is no zoom by default. Currently, Firefox, Chrome, etc. are well supported.
Well, it's time to talk about how IE is dealt with. IE provides two attributes: window.screen.deviceXDPI and window.screen.logicalXDPI. deviceXDPI is the corresponding physical pixels on the device, and logicalXDPI is the proportion of independent pixels of the device. The detection interface of the estimation standard is also based on an improvement of the IE method. The default value of these two attributes on systems above Windows XP+ is 96, because the default value of the system is 96dpi.
For browsers that do not support the above two, you can also use the two properties of window.outerWidth and window.innerWidth. outerWidth returns the actual external width of the window element, innerWidth returns the actual internal width of the window element, both widths include the width including the scroll bar.
With these attributes, you can basically solve 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 enlarged, and if it is less than 100, it is shrinked.
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 articles, please indicate the reprint: Reprinted from front-end development