JavaScript Browser Scaling Detection implementation method

Many WEB developers are likely to encounter this headache, that is, when the user to reduce or enlarge the page, the original good layout is destroyed. It is a big challenge for developers to allow web pages to support adaptive scaling and zooming out of the layout.

In my opinion, if the user is consciously scaling the page, it should be known that scaling destroys the layout. There are a lot of users who don't even know when they zoom in on a Web page, and they need to be reminded that the zoom level of the browser should be reset to the default proportions.

Speaking of browser zoom detection, there may be several methods can be implemented, from the detection of CSS styles to detect the size of Flash, can be said to be recount, but I feel a little trouble. In fact, there are more convenient methods, of course, each browser detection methods are different, for IE6, it is directly ignored, because the IE6 can only scale text.

First of all, the browser provides a standard instrumentation interface, Window.devicepixelratio is the device on the physical pixel and device independent pixel ratio, this property can be used to detect whether the Web page has been scaled. On a normal PC browser, the default value of 1 is the default without scaling. Unfortunately such a convenient attribute is currently only supported by Firefox.

OK, then let's talk about IE's processing methods. IE provides Window.screen.deviceXDPI and Window.screen.logicalXDPI two attributes, devicexdpi is the physical pixel on the corresponding device, and logicalxdpi is the ratio of independent pixels of the device. The estimated standard detection interface is also only an improvement based on the IE method. The default values for these two properties on systems above Windows xp+ are 96, because the system defaults to 96dpi.

For both WebKit and opera, they support both the Window.outerwidth and Window.innerwidth properties. Outerwidth returns the external actual width of the window element, Innerwidth returns the internal actual width of the window element, which contains the width of the scroll bar.

With these attributes, you can basically handle the browsers that are common on PC browsers. The implementation code is as follows:

The code is as follows

Copy Code

var detectzoom = function () { var ratio = 0, Screen = Window.screen, UA = Navigator.userAgent.toLowerCase (); if (~ua.indexof (' Firefox ')) { 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); } 360 security browsers maximize the uncanny outerwidth and innerwidth are not equal if (ratio = = | | ratio = 101) { Ratio = 100; } return ratio; };

The return value of the Detectzoom function, if 100 is the default zoom level, greater than 100 is magnified, and less than 100 is reduced.