Created
July 1, 2011 20:10
-
-
Save ChrisMBarr/1059295 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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Thanks! I've been working on this a bit more and don't have the latest version up here. Eventually I'll get it up!
This code saved me! What license do you attach on this code? Can I use it in my web application?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very nice code. It works on Firefox 11.0, IE 9, and Safari 5.1.2 (Windows) for me.