Cross Browser Zoom and Pixel Ratio Detector

As of January 2013 https://github.com/yonran stopped maintaining his source, and transferred the repository to me.

If you are looking to update previous versions note that there were some breaking changes.

Major Changes form the last yonran version:

DetectZoom object name changed to detectZoom.
DetectZoom.ratio() is no longer publicly accesible.
Supports: IE8+, FF4+, modern Webkit, mobile Webkit, Opera 11.1+
IE6, IE7, FF3.6 and Opera 10.x are no longer supported.
Added support to be loaded as an AMD and CommonJS module.

READ THIS: Detect-zoom is currently unusable for desktop

Last update: Aug 7 2013
In the past few months both Mozilla and Google made some changes to their browsers that make it almost impossible to do what detect-zoom is here to do:

Firefox

On Firefox 18 Mozilla changes the devicePixelRatio value on manual zoom (cmd/ctrl +/-), making it impossible to know whether the browser is in zoom mode or is it a retina device, ignoring what the word DEVICE represents.

I personally believe someone there refuses to admit this is a mistake and revert this decision.

Chrome

On Chrome 27 (Meaning WebKit and Blink) webkitTextSizeAdjust was deprecated on desktops versions of the browser. This was the only bullet proof way to detect zoom in desktop Chrome that I am aware of.

There are couple of other ways, but they don't cover all the bases - one uses SVG but is not working in iFrames, the other uses window.inner/outerWidth and is not working when there is a sidebar or the DevTools are open on the side.

Other Known Issues

In some multi-monitor enviroments where each monitor has a different 'pixel aspect ratio' windows that span accross both monitors might return false pixelAspectRatio values.

What is this for?

Detecting the browser zoom level and device pixel ratio relative to the zoom level.

It can be used to show higher-resolution canvas or img when necessary, to warn users that your site's layout will be broken in their current zoom level, and much more.
Personally I'm maitaining it to use Detect-zoom in Wix.com's editor to warn users that their browser is in zoom mode before saving important changes to their website.

Live Example

Change the zoom level of your browser (ctrl/command and +/-) to see the numbers change

Current zoom level:
Device Pixel Aspect Ratio:

Usage

Detect-zoom has only two public functions:

zoom() Returns the zoom level of the user's browser using Javascript.
device() Returns the device pixel ratio multiplied by the zoom level (Read more about devicePixelRatio at QuirksMode)

    <script src="detect-zoom.js"></script>
    <script>
      var zoom = detectZoom.zoom();
      var device = detectZoom.device();

      console.log(zoom, device);
    </script>

AMD Usage

    require(['detect-zoom'], function(detectZoom){
        var zoom = detectZoom.zoom();
    });

Install with NPM

 > npm install detect-zoom

Help Needed

Detect-zoom is not complete,
I need help testing different browsers, patches welcome.

License

Detect-zoom is dual-licensed under the WTFPL and MIT license, at the recipient's choice.