READ THIS: Detect-zoom is currently unusable for desktop

[tombigel]

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.

[paulirish]

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/RyUSi3zdumQ is Blink's recent thread discussing means of detecting zoom level and standardizations of such.
Tom, I'd be happy to introduce you to some people so you can explain the use cases of this script and help identify either a temporary workaround and/or work on the long-term solution.

[tombigel]

Thanks @paulirish
Someone posted a possible solution for Blink/Webkit, I still need to go through it.
The problem was never the devicePixelRatio rather than separating the user initiated zoom factor.

[danielpowney]

Hi Tom, do you have any updates? I may not understand the Firefox issue correctly, is the zoom level and device pixel ratio always correct on page load? Does the issue only occur after a manual zoom on the page? If so, why not keep the original values so that you always have the original device pixel ratio. Can you please clarify. Thanks. Daniel.

[jaukia]

Google Drive does also zoom level detection with some proprietary code. The mechanisms it uses seem to be something along these lines:

• (document.width / div[min-width:100%]) / window.innerWidth (when window.outerWidth < 250?)
• window.outerWidth / window.innerWidth (when window.outerWidth >= 250?)
• window.devicePixelRatio (FF & new Chromes)
• (documentElement.offsetHeight / window.innerHeight) * window.devicePixelRatio
• (screen.deviceXDPI / screen.logicalXDPI) * window.devicePixelRatio

I hope this helps at improving the detect-zoom plugin, would be really great to have it working correctly!

And @paulirish, getting a standard way to detect the zoom levels in browsers would be really useful in complex real-world HTML5 apps, where the browser functionality when zoomed in/out cannot be made reliable in a consistent manner easily (think Google Docs/Drive spreadsheet).

[d4rkr00t]

Does it still actual? Or it's can detect zoom in desktop browsers?

[tombigel]

I'm not sure, I merged some pull requests in the past year but I haven't checked if things work on desktop browsers. 

Sorry. 

—
Tom B.

On Thu, Jun 11, 2015 at 11:12 AM, Stanislav Sysoev
notifications@github.com wrote:

Does it still actual? Or it's can detect zoom in desktop browsers?

Reply to this email directly or view it on GitHub:
#45 (comment)

[d4rkr00t]

Ok, thanks. I've checked in Chrome and it seems to work.

[quantuminformation]

Can we update the readme?

[bradvogel]

Bump :)

[willsp]

My employer is currently using this, with #54 merged, on thousands of web sites. Working great!