This article mainly introduces the javascript code used to check the browser's scaling status. For more information about the code, see the following, it refers to the percentage scaling of browser webpage content (press Ctrl and + or-to zoom ).
There is a great way to detect such scaling. QQ space uses flash to detect whether the browser is in scaling status. The javascript method is provided to detect browser scaling.
IE6 directly ignores this because IE6 can only scale the text.
Let's talk about the standard detection interface provided by the browser. window. devicePixelRatio is the ratio of physical pixels on the device to the independent pixels of the device. This attribute can be used to detect whether the webpage is scaled. In a general PC browser, the default value is 1 without scaling by default. Currently, Firefox and chrome are well supported.
Okay. Now let's talk about how to handle IE. IE provides two properties: window. screen. deviceXDPI and window. screen. logicalXDPI. deviceXDPI is the physical pixel of the corresponding device, and logicalXDPI is the proportion of independent pixels of the device. The standard detection interface is only an improvement based on the IE Method. The default values of these two attributes on windows XP + and later systems are both 96, because the default value is 96 dpi.
For browsers that are not supported by the preceding two types, you can also use the window. outerWidth and window. innerWidth attributes. OuterWidth returns the actual external width of the window element, and innerWidth returns the actual internal width of the window element, both of which contain the width of the scroll bar.
With these attributes, you can basically deal with common browsers on PC browsers. The implementation code is as follows:
The Return Value of the detectZoom function is the default zoom level if it is 100. If it is greater than 100, it is enlarged. If it is smaller than 100, it is reduced.
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, reprinted Please note:Reposted from front-end development
