Browser Zoom Check
HTML
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div>Current zoom level: <span id="zoom"></span></div>
<div>Device Pixel Aspect Ratio:<span id="device"></span></div>
<div>Zoom Level:<span id="level"></span>%</div>
<button type="button" class="btn btn-primary" id="reseteo" onclick="javascript: window.document.body.style.zoom = 1.0;">Reset Zoom</button>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Your Browser Zoom is <span id="levelM"></span>%</h4>
</div>
<div class="modal-body">
<p>To view this program on the correct size please click the <b>Reset Zoom</b> button bellow to set the default browser size zoom level or <b>"click CTRL + 0"</b>.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="reseteo" onclick="javascript: window.document.body.style.zoom = 1.0;">Reset Zoom</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
JavaScript
/* Detect-zoom
* -----------
* Cross Browser Zoom and Pixel Ratio Detector
* Version 1.0.4 | Apr 1 2013
* dual-licensed under the WTFPL and MIT license
* Maintained by https://github/tombigel
* Original developer https://github.com/yonran
*/
//AMD and CommonJS initialization copied from https://github.com/zohararad/audio5js
(function(root, ns, factory) {
"use strict";
if (typeof(module) !== 'undefined' && module.exports) { // CommonJS
module.exports = factory(ns, root);
} else if (typeof(define) === 'function' && define.amd) { // AMD
define("detect-zoom", function() {
return factory(ns, root);
});
} else {
root[ns] = factory(ns, root);
}
}(window, 'detectZoom', function() {
/**
* Use devicePixelRatio if supported by the browser
* @return {Number}
* @private
*/
var devicePixelRatio = function() {
return window.devicePixelRatio || 1;
};
/**
* Fallback function to set default values
* @return {Object}
* @private
*/
var fallback = function() {
return {
zoom: 1,
devicePxPerCssPx: 1
};
};
/**
* IE 8 and 9: no trick needed!
* TODO: Test on IE10 and Windows 8 RT
* @return {Object}
* @private
**/
var ie8 = function() {
var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100) / 100;
return {
zoom: zoom,
devicePxPerCssPx: zoom * devicePixelRatio()
};
};
/**
* For IE10 we need to change our technique again...
* thanks https://github.com/stefanvanburen
* @return {Object}
* @private
*/
var ie10 = function() {
var zoom = Math.round((document.documentElement.offsetHeight / window.innerHeight) * 100) / 100;
return {
zoom: zoom,
devicePxPerCssPx: zoom * devicePixelRatio()
};
};
/**
* For chrome
*
*/
var chrome = function() {
var zoom = Math.round(((window.outerWidth) / window.innerWidth) * 100) / 100;
return {
zoom: zoom,
devicePxPerCssPx:...