- In Firefox on retina displays (Macbook Pros), the base zoom level is always 2.0. I'm aware of it and looking for a solution.
- 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.
- Fails on WebKit Nightlies because WebKit detection depends on
webkitTextSizeAdjust
which is depracated on desktops.
I'm close to a solution.
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.
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 todetectZoom
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
See the Live Example section in http://tombigel.github.com/detect-zoom/
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
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
anddevicePixelRatio
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
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.
Detect-zoom is dual-licensed under the WTFPL and MIT license, at the recipient's choice.