Detect firefox zoom
Using media queries – doesn't work on MacBook with retina display – returns 2 when not i zoom
HTML
<div>
DPPX value:
<span class="dppx-indicator"></span>
</div>
<button onclick="refreshDppxIndicator();">
Refresh
</button>
JavaScript
window.refreshDppxIndicator = function() {
var indicator = document.querySelector('.dppx-indicator');
indicator.innerText = '';
setTimeout(function() {
indicator.innerText = getDppx(5);
}, 500);
};
refreshDppxIndicator();
function getDppx(precision) {
var searchDPPX = function(level, min, divisor) {
var wmq = window.matchMedia;
while (level >= min && !wmq("(min-resolution: " + (level / divisor) + "dppx)").matches) {
level--;
}
return level;
};
var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
var divisor = 1;
var result;
for (var i = 0; i < precision; i++) {
result = 10 * searchDPPX(maxDPPX, minDPPX, divisor);
maxDPPX = result + 9;
minDPPX = result;
divisor *= 10;
}
return result / divisor;
}