JavaScript detection Browser zoom State Implementation code refers to the browser page content of the percentage zoom (press CTRL and the + sign key or-number key scaling)

Source: Internet
Author: User

The scale mentioned here is not the size of the browser, but rather the percentage scaling of the content of the browser's Web page (by pressing the CTRL and + keys or the scale of the-number key).
There are ways to detect this scale, and QQ space is used by flash to detect whether the browser is zooming. The JavaScript method is provided here to detect the zoom of the browser.
For IE6, it is ignored, because IE6 can only scale the text.
First of all, the standard detection interface provided by the browser, Window.devicepixelratio is the ratio of physical pixels and device independent pixels on the device, and this property can be used to detect whether the Web page is scaled. On a normal PC browser, the default value is 1 without scaling by default. At present, Firefox, Chrome and so on have been very good support.
The next step is to talk about IE processing methods. IE provides Window.screen.deviceXDPI and Window.screen.logicalXDPI two properties, devicexdpi is the corresponding device of the physical pixels, and logicalxdpi is corresponding to the proportion of the device independent pixels. The detection interface of the estimation standard is only an improvement based on the IE method. The default value for these two properties on systems above Windows xp+ is 96 because the system defaults to 96dpi.
You can also take advantage of both the Window.outerwidth and Window.innerwidth properties for browsers that are not supported by either of these. Outerwidth returns the outer actual width of the window element, Innerwidth returns the inner actual width of the window element, both of which contain the width of the scroll bar.
With these properties, you can basically take care of browsers that are common to your PC browser. The implementation code is as follows:

Method One:

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.

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/wi ndow.innerwidth;  }      if (ratio) {    ratio = Math.Round (ratio *);  }      return ratio;};

  

Method Two:
var obj = {' Window.devicepixelratio ': window.devicepixelratio, ' screen.devicexdpi/screen.logicalxdpi ': screen.devicexdpi/screen.logicalxdpi,           ' window.outerwidth/window.innerwidth ': window.outerwidth/ Window.innerwidth,           ' document.documentelement.offsetheight/window.innerheight ': Document.documentelement.offsetheight/window.innerheight,           ' window.top.outerwidth/window.top.innerwidth ': Window.top.outerwidth/window.top.innerwidth}                               function Print (obj) {          var s = ';          for (var key in obj) {            s+=key;            s+= ': ';            S+=obj[key];            s+= ' \n\r '          }          document.write (s)                  }print (obj)

  

JavaScript detection Browser zoom State Implementation code refers to the browser page content of the percentage zoom (press CTRL and the + sign key or-number key scaling)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.