maheshbabu · August 29, 2015 14:13
diff --git a/ZoomDetect.htm b/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>