ChrisMBarr/ZoomDetect.htm

## ZoomDetect.htm
<!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>
	<!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>