tombigel / detect-zoom

Cross Browser Zoom and Pixel Ratio Detector

Cross Browser Zoom and Pixel Ratio Detector

---

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 maintaining 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.

What happend to @yonran?

Don't worry, he is well. As of January 2013 @yonran stopped maintaining his source of detect-zoom, and transferred the repository to me. If you are looking to update previous versions note that there were some breaking changes

• Major Changes from the latest yonran version:
  • DetectZoom object name changed to detectZoom
  • DetectZoom.ratio() is no longer publicly accessible
  • Supported browsers: IE8+, FF4+, modern Webkit, mobile Webkit, Opera 11.1+
  • IE6, IE7, FF 3.6 and Opera 10.x are no longer supported
  • Added support to be loaded as an AMD and CommonJS module

Live Example

See the Live Example section in http://tombigel.github.com/detect-zoom/

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();
});

Installing with NPM

> npm install detect-zoom

Changelog

2013/4/01

• Changed WebKit detection from deprecated webkitTextSizeAdjust to webkitMarquee
• Changed WebKitMobile detection from unreliable 'ontouchstart' event (can be triggered on desktops too) to 'orientation' property that is hopefully more reliable
• Minor version bump to 1.0.4

2013/3/29

• Added package.json (thanks @TCampaigne)
• Some documentation fixes
• Added detect-zoom to npm package manager (again, thanks @TCampaigne)

2013/2/25

• Fixed a missing 'else' between ie8 and ie10 detection
• Minor version bump to 1.0.2

2013/2/15

• Added a fix for IE10 Metro (or whatever MS calls it these days..) by @stefanvanburen
• Minor version bump to 1.0.1
• Added minimized version

2013/2/05

• Merged a pull request that fixed zoom on IE being returned X100 (thanks @kreymerman)
• Refactored the code some more, changed some function names
• Browser dependent main function is created only on initialization (thanks @jsmaker)
• Open Issue: Firefox returns zoom and devicePixelRatio the same. Still looking for a solution here.
• Started versioning - this is version 1.0.0

2013/1/27

• Added a fix to Mozilla's (Broken as I see it - https://bugzilla.mozilla.org/show_bug.cgi?id=809788) implementation of window.devicePixel starting Firefox 18

2013/1/26

• Repository moved here
• Refactored most of the code
• Removed support for older browsers
• Added support for AMD and CommonJS

Help Needed

Detect-zoom is not complete, many parts of the code are 6 to 12 months old and I'm still reviewing them I need help testing different browsers, finding better ways to measure zoom on problematic browsers (ahm.. Firefox.. ahm) patches are more than welcome.

License

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

detect-zoom's Issues

Is this valid fix for wrong IE8 detection ?

Hi,

when a site forces IE8 mode (I am using IE9), a JS runtime error shows up. Looks like IE8 is not correctly detected, but FF 18 instead.

My best guess is the following fix:
..............
var detectFunction = (function () {
var func = fallback;
//IE8+
if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
func = ie8;
//RKA+: Not to fall thru to other checks.
return func;
//RKA-
}

Pls, verify. For me, it works.

You might test when accessing http://das-osteuropa-forum.de/ using IE9, for example.

matchMedia shim is slow on large documents

According to Neil, it seems that my matchMedia shim (FF4) is too slow on large documents. If Firefox had scoped stylesheets, they may have helped to improve performance. I'll have to figure out some other solution.

Invalid zoom in Chrome when touch/pen/tablet input devices is plugged into a desktop/laptop computer

When the touch/pen/tablet input devices is plugged in and drivers installed, the detect-zoom.js interpret the current desktop computer as a mobile device because of the ontouchstart event. The _zoomWebkitMobile() is reported instead of _zoomWebkit().

When this happens, the zoom level is only correct when the browser is maximized with nothing obscuring the borders (such as the height or width of a windows taskbar).

Should I suggest that a better user agent sniffing code be used to detect 'mobile' devices?

Pls confirm my fix for failing detection of IE8

Pls confirm this bug fix:

var detectFunction = (function () {
    var func = fallback;
    //IE8+
    if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
        func = ie8;

//RKA+: To avoid fall thru to other tests, which might hit, like FF
return func;
//RKA-
}

License?

Hi,

under which license I can use your code?

should use screen.width/window.innerWidth for chrome

because window.outerWidth ( and outerHeight) is not correct at page load or orientation change on android.On iOS, outerWidth seems to be 0.

FF3.6.3 default zoom 1.06 (xp)

On FF3.6.3 (windows xp) the default zoom value is 1.06

Wrong .device() on iOS 10

The second value should be 3 (iPhone 6s plus)

Thank you

I found your answer on Stackoverflow. Thank you. So much.
(I wish github had general commenting for things like this)

Incorrect value for zoom inside iframe in Chrome

With the merge of #50, it appears that Chrome will report an incorrect value of the zoom level when inside an iframe of different width to the parent frame. window.outerWidth seems to always reference to the total browser width, whereas window.innerWidth references just the current frame's width.

Unfortunately, it seems Chrome does not allow cross domain access to top.innerWidth so I am not sure of a way to get a proper value to compare against window.outerWidth. Any thoughts on how we might be able to support iframes in Chrome?

Doesn't work in newer Opera

window.innerWidth is no longer in device pixels as of Opera 11.something.

Zoom does not work at all in IE10 Metro - always returns 1

Zoom does not work at all in IE10 Metro - always returns 1

Should I measure non-reflow zoom in Safari?

Safari 5.1 has three notions of zooming

1. Discrete full-page zoom (Cmd++)
2. Discrete text-only zoom (Cmd++) with the setting “Zoom Text Only” enabled
3. Continuous pinch zoom using trackpad. This is like the iPhone: it does not cause layout to happen again.

Currently, I only measure the first kind of zoom. Would it be useful to try to measure the text-only zoom or the non-reflow zoom?

Doesn't work at extremely small zooms in Webkit

Since it uses -webkit-text-size-adjust:none and text size has a minimum value that is different from the minimum zoom, the reported zoom level at the tiniest zoom stop or two in Chrome is wrong.

Firefox 18 uses pixelAspectRatio as zoom level

Firefox 18 started supporting pixelAspectRatio, and it uses it as the zoom indicator on desktop versions.

Need to investigate whether it's a bug or a feature

Always returns zoom=1 in FF 16 on Linux

Using test-page.html, I consistently get "Zoom: 1" in FF. I get the expected behavior in Chrome.

Here's my browser details:
Firefox version 16.0.1
Build identifier: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:16.0) Gecko/20100101 Firefox/16.0

Mobile Safari can zoom an extra 1.5 in landscape mode

Rotating the iPhone or iPad changes the device width to screen.height.

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.

typescript version

/* Detect-zoom
 * -----------
 * Cross Browser Zoom and Pixel Ratio Detector
 * Version 1.0.4 | Apr 1 2013
 * dual-licensed under the WTFPL and MIT license
 * Maintained by https://github/tombigel
 * Original developer https://github.com/yonran
 */

export class DetectZoom {
  constructor(private window: Window) {}
  /**
   * Use devicePixelRatio if supported by the browser
   */
  get devicePixelRatio(): number {
    return this.window.devicePixelRatio || 1;
  }

  /**
   * Fallback function to set default values
   */
  private fallback() {
    return {
      zoom: 1,
      devicePxPerCssPx: 1,
    };
  }

  /**
   * IE 8 and 9: no trick needed!
   */
  private ie8() {
    const zoom = Math.round(((this.window.screen as any).deviceXDPI / (this.window.screen as any).logicalXDPI) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * For IE10 we need to change our technique again...
   * thanks https://github.com/stefanvanburen
   */
  private ie10() {
    const zoom = Math.round((this.window.document.documentElement.offsetHeight / this.window.innerHeight) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * For chrome
   */
  private chrome() {
    const zoom = Math.round((this.window.outerWidth / this.window.innerWidth) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * For safari (same as chrome)
   */
  private safari() {
    const zoom = Math.round((this.window.document.documentElement.clientWidth / this.window.innerWidth) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * Mobile WebKit
   * the trick: window.innerWIdth is in CSS pixels, while
   * screen.width and screen.height are in system pixels.
   * And there are no scrollbars to mess up the measurement.
   */
  private webkitMobile() {
    const deviceWidth = Math.abs(this.window.screen.orientation.angle) === 90 ? screen.height : screen.width;
    const zoom = deviceWidth / window.innerWidth;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * Desktop Webkit
   * the trick: an element's clientHeight is in CSS pixels, while you can
   * set its line-height in system pixels using font-size and
   * -webkit-text-size-adjust:none.
   * device-pixel-ratio: http://www.webkit.org/blog/55/high-dpi-web-sites/
   *
   * Previous trick (used before http://trac.webkit.org/changeset/100847):
   * documentElement.scrollWidth is in CSS pixels, while
   * document.width was in system pixels. Note that this is the
   * layout width of the document, which is slightly different from viewport
   * because document width does not include scrollbars and might be wider
   * due to big elements.
   */
  private webkit() {
    const important = str => str.replace(/;/g, ' !important;');

    const div = this.window.document.createElement('div');
    div.innerHTML = '1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0';
    div.setAttribute(
      'style',
      important(
        'font: 100px/1em sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;'
      )
    );

    // The container exists so that the div will be laid out in its own flow
    // while not impacting the layout, viewport size, or display of the
    // webpage as a whole.
    // Add !important and relevant CSS rule resets
    // so that other rules cannot affect the results.
    const container = this.window.document.createElement('div');
    container.setAttribute('style', important('width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;'));
    container.appendChild(div);

    document.body.appendChild(container);
    let zoom = 1000 / div.clientHeight;
    zoom = Math.round(zoom * 100) / 100;
    document.body.removeChild(container);

    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * no real trick; device-pixel-ratio is the ratio of device dpi / css dpi.
   * (Note that this is a different interpretation than Webkit's device
   * pixel ratio, which is the ratio device dpi / system dpi).
   *
   * Also, for Mozilla, there is no difference between the zoom factor and the device ratio.
   */
  private firefox4() {
    const zoom = Math.round(this.mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom,
    };
  }

  /**
   * Firefox 18.x
   * Mozilla added support for devicePixelRatio to Firefox 18,
   * but it is affected by the zoom level, so, like in older
   * Firefox we can't tell if we are in zoom mode or in a device
   * with a different pixel ratio
   */
  private firefox18() {
    return {
      zoom: this.firefox4().zoom,
      devicePxPerCssPx: this.devicePixelRatio,
    };
  }

  /**
   * works starting Opera 11.11
   * the trick: outerWidth is the viewport width including scrollbars in
   * system px, while innerWidth is the viewport width including scrollbars
   * in CSS px
   */
  private opera11() {
    const zoom = Math.round((this.window.top.outerWidth / this.window.top.innerWidth) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  binarySearch(property: string, unit: string, a: number, b: number, maxIter: number, epsilon: number, matchMedia: any) {
    const mid = (a + b) / 2;
    if (maxIter <= 0 || b - a < epsilon) {
      return mid;
    }
    const query = '(' + property + ':' + mid + unit + ')';
    if (matchMedia(query).matches) {
      return this.binarySearch(property, unit, mid, b, maxIter - 1, epsilon, matchMedia);
    } else {
      return this.binarySearch(property, unit, a, mid, maxIter - 1, epsilon, matchMedia);
    }
  }

  /**
   * Use a binary search through media queries to find zoom level in Firefox
   */
  private mediaQueryBinarySearch(property: string, unit: string, a: number, b: number, maxIter: number, epsilon: number) {
    let matchMedia;
    let head, style, div;
    if (window.matchMedia) {
      matchMedia = window.matchMedia;
    } else {
      head = document.getElementsByTagName('head')[0];
      style = document.createElement('style');
      head.appendChild(style);

      div = document.createElement('div');
      div.className = 'mediaQueryBinarySearch';
      div.style.display = 'none';
      document.body.appendChild(div);

      matchMedia = function (query) {
        style.sheet.insertRule('@media ' + query + '{.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0);
        const matched = getComputedStyle(div, null).textDecoration === 'underline';
        style.sheet.deleteRule(0);
        return { matches: matched };
      };
    }
    const ratio = this.binarySearch(property, unit, a, b, maxIter, epsilon, matchMedia);
    if (div) {
      head.removeChild(style);
      document.body.removeChild(div);
    }
    return ratio;
  }

  private detect() {
    //IE8+
    if (!isNaN((this.window.screen as any).logicalXDPI) && !isNaN((this.window.screen as any).systemXDPI)) {
      return this.ie8();
    }
    // IE10+ / Touch
    else if (this.window.navigator.msMaxTouchPoints) {
      return this.ie10();
    }
    //chrome
    else if (!!(this.window as any).chrome && !(!!(this.window as any).opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0)) {
      return this.chrome();
    }
    //safari
    else if (Object.prototype.toString.call((this.window as any).HTMLElement).indexOf('Constructor') > 0) {
      return this.safari();
    }
    //Mobile Webkit
    else if ('orientation' in this.window && 'webkitRequestAnimationFrame' in this.window) {
      return this.webkitMobile();
    }
    //WebKit
    else if ('webkitRequestAnimationFrame' in this.window) {
      return this.webkit();
    }
    //Opera
    else if ((this.window as any).navigator.userAgent.indexOf('Opera') >= 0) {
      return this.opera11();
    }
    //Last one is Firefox
    //FF 18.x
    else if ((this.window as any).devicePixelRatio) {
      return this.firefox18();
    }
    //FF 4.0 - 17.x
    else if (this.firefox4().zoom > 0.001) {
      return this.firefox4();
    }

    return this.fallback();
  }

  zoom() {
    return this.detect().zoom;
  }

  /**
   * Ratios.devicePxPerCssPx shorthand
   */
  device() {
    return this.detect().devicePxPerCssPx;
  }
}

detect-zoom changes zoom when you resize the browser window in Chrome

When I am in Chrome (32.0.1700.107 m, Desktop version) and I try to resize the browser window, detect-zoom says that the zoom is applied (i.e., the zoom is not 1 or 0).

This happens because it is using "webkitMobile" function. If you try to use "webkit" function instead, you will end with a float number in devicePxPerCssPx but zoom will always be 1. If you zoom out enough, devicePxPerCssPx will return wrong numbers.

By the way, I would really like detect-zoom to be compatible with both old and newer browsers. Please, don't lose backwards compatibility.

Thanks to yonran and tombigel and everyone else involved with this script! It is great despite some issues. I hope you can fix them soom and add compatibility with any browser (old or new) whenever is possible. I would like to use it (keeping all credits, of course) for a future open source project I am developing now, but I would need detect-zoom to be reliable in all browsers, including desktop too.

Collaboration request

Hi everyone, I see theres a few forks that are diverging out, can we get everyone back on the same boat and share development? Perhaps we can get some of the Forkers to have merge abilities here?

thanks

Polling needed or event model exists?

Hi, could you tell me whether I need to poll the zoom values or there is any way to use an event model for this saving much resources?

Doesn't seem to detect "text only" zoom in Firefox

I prefer using "text only" zoom instead of full zoom because I really don't like horizontal scrollbars, and I noticed that detectZoom doesn't detect such zoom.

I found nothing about this issue (is it one?) in the documentation or other Github issues.

More Accurate Device Pixel Ratio Function

Is window.devicePixelRatio always accurate? I found this code which seems to indicate that there may be special cases to be handled.

https://github.com/tysonmatanich/GetDevicePixelRatio/blob/master/getDevicePixelRatio.js

Doesn't work in Chrome 27 (which is now the current release channel version)

The sample page: http://tombigel.github.io/detect-zoom/ always shows 1.0

Detected zoom does not match Firefox zoom values

Detected zoom values are rounded with two digits:

..., 1, 1.09, 1.2, 1.3, ...

It expected that the detected values match the Firefox zoom levels defined by the property toolkit.zoomManager.zoomValues in about:config:

.3, .5, .67, .8, .9, 1, 1.1, 1.2, 1.33, 1.5, 1.7, 2, 2.4, 3

Invalid zoom level in FF 18.0.2 for Mac with retina display

At 100% zoom I'm getting:

Current zoom level: 2.00
Device Pixel Aspect Ratio: 2.00

jQuery

Is it really needed? If one doesn't have jQuery in the main project, this boosts total download size quite a bit up.

detectZoom not defined

Hi,

detectZoom works in all but one of the sites, I am maintaining. However, on one very complicated site, Chrome/FF throws the following error:

function zzzz { ...
....
//Here the complete source code for detect zoom
.......
var zoom = detectZoom.zoom();
Uncaught ReferenceError: detectZoom is not defined

So it looks like some problem with name space to me. But this is a topic, too high for my limited knowledge of JS. Can anybody give me some hint what to do here ?

Incorrect browser zoom under MSIE9 and zoom set to 105% or 110%

When setting the zoom value to 105% or 110% under MSIE9, detect-zoom will give a value of 1.04... and 1.09... respectively. The expected values are 1.05 and 1.1 respectively.

In order to correct these values, I suggest to replace line 59:

var zoom = screen.deviceXDPI / screen.logicalXDPI;

by:

var zoom = Math.floor(screen.deviceXDPI*100 / screen.logicalXDPI + 0.9) / 100;

Firefox new version change default zoom

Since a new update of Firefox, all web pages looks bigger, but the browser shows a 100% zoom. When I use detect-zoom (even Live Example), it reads Current zoom level: 1.25 and Device Pixel Aspect Ratio: 1.25
I hope Firefox is going to revert that but do you have any workaround ?

Uncaught TypeError when js included in head (Chrome 27)

Because detectFunction executes immediately, and document.body is null, this error occurs on pages where detect-zoom is included in the head of the HTML.

Idea check the client width of a known Element

Has anyone thought of this?

<div id="test">H</div><br/>
<div id="content" style="background-color:cyan; width:50%;">BLAH<div/>
</body>
<script>
function work(){
var w = screen.width;
var content = document.getElementById("content");
var width = content.clientWidth;
var height = content.clientHeight;
document.getElementById("test").innerHTML = width + " " + height + " " + w;
}
setInterval(work,60);
</script>

var w doesn't change it's value when the page is zoomed.
var width changes.

Some Maths and voila 😄

Typo in wiki

-Supported browsres
+Supported browsers

Missing browser zoom change event

It would be great to allow browser zoom change event listener to be added:

DetectZoom.addZoomChangeEventListener(function (previousZoom, newZoom) {
    alert("zoom changed: previous="+previousZoom+", new="+newZoom);
});

Forked this project and cleaned up the code a bit

https://github.com/tombigel/detect-zoom

FF 19.0 document.body errors as null.

This error causes the entire detectZoom file to fail.

I replaced document.body.style.webkitTextSizeAdjust === 'string' with $.browser.webkit === true (as I am using jquery).

Thought you should know.

Not working on latest Webkit Nightlies

In the latest webkit nightlies the zoom level is not detected. This is possibly due to the fact that "document.body.style.webkitTextSizeAdjust" returns undefined (not a string) on the webkit nightly.

My Webkit Nightly (Safari) version:
6.0.1 (8536.26.14, 537+)

Operating system: Os X