Skip to content

Instantly share code, notes, and snippets.

@NoobsArePeople2
Forked from ChrisMBarr/ZoomDetect.htm
Created August 22, 2016 19:22
Show Gist options
  • Save NoobsArePeople2/0e90f5eafcddc75bcfa95217e8802fd6 to your computer and use it in GitHub Desktop.
Save NoobsArePeople2/0e90f5eafcddc75bcfa95217e8802fd6 to your computer and use it in GitHub Desktop.
Detects if the browser zoom is set to the default or not. (Not working for Opera, Firefox 3.6, and anything below Firefox 3.5)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculating zoom using Javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
function hasPageBeenResized() {
var isResized;
function mediaQueryMatches(property, r) {
var styles = document.createElement('style');
document.getElementsByTagName("head")[0].appendChild(styles);
var dummyElement = document.createElement('div');
dummyElement.innerHTML="test";
dummyElement.id="mq_dummyElement";
document.body.appendChild(dummyElement);
styles.sheet.insertRule('@media('+property+':'+r+'){#mq_dummyElement{text-decoration:underline}}', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration == 'underline';
styles.sheet.deleteRule(0);
document.body.removeChild(dummyElement);
document.getElementsByTagName("head")[0].removeChild(styles);
return matched;
};
function mediaQueryBinarySearch(property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(property, unit, a, mid, maxIter-1, epsilon);
}
};
if($.browser.msie){
if($.browser.version==7){
//IE7
var r = document.body.getBoundingClientRect();
isResized = ((r.right-r.left)/document.body.offsetWidth)!==1;
}else if($.browser.version==8){
//IE 8
isResized= (screen.deviceXDPI / screen.logicalXDPI)!==1;
}else if($.browser.version>=9){
//IE9+
isResized=(screen.deviceXDPI / screen.systemXDPI)!==1;
}
}else if($.browser.webkit){
//Webkit
var documentWidthCss = Math.max(
document.documentElement.clientWidth,
document.documentElement.scrollWidth,
document.documentElement.offsetWidth
);
isResized=(document.width / documentWidthCss)!==1;
}else if($.browser.opera){
//Opera - No good way to detect :(
}else if($.browser.mozilla){
if($.browser.version > "1.9.1" && $.browser.version < "1.9.2"){
//Firefox 3.5 only
isResized=(screen.width / mediaQueryBinarySearch('min-device-width', 'px', 0, 6000, 20, .0001))!==1;
}else if(parseFloat($.browser.version)>=4){
//Firefox 4+
isResized=(Math.round(1000 * mediaQueryBinarySearch('min--moz-device-pixel-ratio','', 0, 10, 20, .0001)) / 1000)!==1;
}else{
//Firefox 3.6 and lower than 3.5 - No good way to detect :(
}
}
document.getElementById("zoomLevel").innerHTML=isResized;
//return isResized;
};
$(function(){
//run on page load
hasPageBeenResized();
});
//run when page is resized
onresize = hasPageBeenResized;
</script>
</head>
<body>
<p>Much of the code comes from <a href="http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers/5078596#5078596">this StackOverflow answer</a>.</p>
<p>
Use <strong>Ctrl/Cmd</strong> and the <strong>+</strong> or <strong>-</strong> keys to zoom.
<br />
You can also use <strong>Ctrl/Cmd</strong> and the scrollwheel.
<br />
Press <strong>Ctrl/Cmd</strong> and <strong>0</strong> (zero) to reset the zoom back to the default.
</p>
<h1>
Browser zoom: <span id="zoomLevel" style="color:Blue;"></span>
</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment