阻止pc端瀏覽器縮放js代碼
眾所周知：移動端頁面禁止用戶縮放界面只需加上<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>
此次收獲：
- 鍵盤事件的修飾鍵（ctrlKey、metaKey）、每個按鍵的編號
- DOMContentLoaded(dom結構渲染完成) 和 Loaded（頁面中所有的資源包括圖片都渲染完成） 事件的區別
- addEventListener 和 DOMContentLoaded 支持 >= ie9，基本無需考慮兼容性