tombigel / detect-zoom Goto Github PK
View Code? Open in Web Editor NEWCross Browser Zoom and Pixel Ratio Detector
Home Page: http://tombigel.github.io/detect-zoom/
Cross Browser Zoom and Pixel Ratio Detector
Home Page: http://tombigel.github.io/detect-zoom/
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.
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);
});
-Supported browsres
+Supported browsers
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:
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.
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.
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-
}
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.
The sample page: http://tombigel.github.io/detect-zoom/ always shows 1.0
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?
/* 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;
}
}
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?
Hi,
under which license I can use your code?
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.
Zoom does not work at all in IE10 Metro - always returns 1
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.
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 ?
I found your answer on Stackoverflow. Thank you. So much.
(I wish github had general commenting for things like this)
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;
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.
On FF3.6.3 (windows xp) the default zoom value is 1.06
Is it really needed? If one doesn't have jQuery in the main project, this boosts total download size quite a bit up.
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
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
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.
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 ?
because window.outerWidth ( and outerHeight) is not correct at page load or orientation change on android.On iOS, outerWidth seems to be 0.
Safari 5.1 has three notions of zooming
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?
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 😄
Rotating the iPhone or iPad changes the device width to screen.height.
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?
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
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
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.
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
window.innerWidth is no longer in device pixels as of Opera 11.something.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.