-
-
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)
This file contains hidden or 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment