眾所周知：移動端頁面禁止用戶縮放界面只需加上<meta name="viewport" content="user-scalable=0">即可，但是pc端確實比較麻煩，用戶可以通過如下幾種方式來縮放：
windows：
- ctrl + +/-
- ctrl + 滾輪
- 瀏覽器菜單欄
mac：
- cammond + +/-
- 瀏覽器菜單欄
由於瀏覽器菜單欄屬於系統軟件權限，沒發控制，我們着手解決ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況，只能通過js來控制了
Reference：
stackoverflow關於組織縮放的代碼：http://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser
jquery event.whick源碼，先取charCode(mdn說明其已被廢棄)再取keyCode： https://github.com/jquery/jquery/blob/master/src/event.js#L633
下面是用juery和原生js實現的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<div class="wrap"></div>
<p>test測試test測試test測試test測試</p>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
/**
* @file 禁止pc瀏覽器使用ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面 (prevent borwser zoom)
* 眾所周知：移動端頁面禁止用戶縮放界面只需要在<meta name="viewport" content="user-scalable=0"> 即可，但是pc端確實比較麻煩，只能通過js來控制了
* @author yangzongjun
* @date 2017-01-06
*/
/**
代碼中event.whick的數字代號的意思：
mac下
chrome:
- 189
+ 187
ff:
- 173
+ 61
然后剩余的兩個代號是107、109代表的是數字鍵盤的+-號
*/
// jqeury version
// $(document).ready(function () {
// // chrome 瀏覽器直接加上下面這個樣式就行了，但是ff不識別
// $('body').css('zoom', 'reset');
// $(document).keydown(function (event) {
// if ((event.ctrlKey === true || event.metaKey === true)
// && (event.which === 61 || event.which === 107
// || event.which === 173 || event.which === 109
// || event.which === 187 || event.which === 189))
// {
// event.preventDefault();
// }
// });
// $(window).bind('mousewheel DOMMouseScroll', function (event) {
// if (event.ctrlKey === true || event.metaKey) {
// event.preventDefault();
// }
// });
// });
// 原生js來實現，避免依賴jquery。需要注意的是：addEventListener/DOMContentLoaded在ie中是只支持>=ie9的，一般足夠了
document.addEventListener('DOMContentLoaded', function (event) {
// chrome 瀏覽器直接加上下面這個樣式就行了，但是ff不識別
document.body.style.zoom = 'reset';
document.addEventListener('keydown', function (event) {
if ((event.ctrlKey === true || event.metaKey === true)
&& (event.which === 61 || event.which === 107
|| event.which === 173 || event.which === 109
|| event.which === 187 || event.which === 189))
{
event.preventDefault();
}
}, false);
document.addEventListener('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, false);
}, false);
</script>
</body>
</html>
獲取當前頁面瀏覽器的縮放大小：
// 判斷pc瀏覽器是否縮放，若返回100則為默認無縮放，如果大於100則是放大，否則縮小
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}
else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio){
ratio = Math.round(ratio * 100);
}
return ratio;
};
//具體實現demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀏覽器網頁內容的百分比縮放（按Ctrl和+號鍵或者-號鍵的縮放）</title>
<style type="text/css">
</style>
</head>
<body>
<a href="javascript:;" id="openApp">知乎客戶端</a>
<input type="text" name="ee" autocomplete="on">
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// 判斷pc瀏覽器是否縮放，若返回100則為默認無縮放，如果大於100則是放大，否則縮小
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}
else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio){
ratio = Math.round(ratio * 100);
}
return ratio;
};
//window.onresize 事件可用於檢測頁面是否觸發了放大或縮小。
$(function(){
//alert(detectZoom())
})
$(window).on('resize',function(){
isScale();
});
//判斷PC端瀏覽器縮放比例不是100%時的情況
function isScale(){
var rate = detectZoom();
if(rate != 100){
//如何讓頁面的縮放比例自動為100,'transform':'scale(1,1)'沒有用，又無法自動條用鍵盤事件，目前只能提示讓用戶如果想使用100%的比例手動去觸發按ctrl+0
console.log(1)
alert('當前頁面不是100%顯示，請按鍵盤ctrl+0恢復100%顯示標准，以防頁面顯示錯亂！')
}
}
//阻止pc端瀏覽器縮放js代碼
//由於瀏覽器菜單欄屬於系統軟件權限，沒發控制，我們着手解決ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況，只能通過js來控制了
// jqeury version
$(document).ready(function () {
// chrome 瀏覽器直接加上下面這個樣式就行了，但是ff不識別
$('body').css('zoom', 'reset');
$(document).keydown(function (event) {
//event.metaKey mac的command鍵
if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){
event.preventDefault();
}
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
});
});
</script>