阻止pc端浏览器缩放js代码
阻止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，基本无需考虑兼容性
