阻止pc端浏览器缩放js代码

众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0"> 即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放:

windows:

  1. ctrl + +/-
  2. ctrl + 滚轮
  3. 浏览器菜单栏

mac:

  1. cammond + +/-
  2. 浏览器菜单栏

由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决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>

此次收获:

  1. 键盘事件的修饰键(ctrlKey、metaKey)、每个按键的编号
  2. DOMContentLoaded(dom结构渲染完成) 和 Loaded(页面中所有的资源包括图片都渲染完成) 事件的区别
  3. addEventListener 和 DOMContentLoaded 支持 >= ie9,基本无需考虑兼容性

阻止pc端浏览器缩放js代码的更多相关文章

  1. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  2. PC端浏览器定位

    第一: PC端浏览器定位(纯前端)浏览器定位 :这里用了两种 ,一种是Html5自带的方法 另一种是引用了百度api  ,百度api 的使用有三种:1 浏览器定位2 ip定位3 SDK辅助定位引用百度 ...

  3. 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

    查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

  4. 移动端&PC端CSS样式兼容代码

    CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...

  5. Fiddler4工具配置及调试手机和PC端浏览器

    Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

  6. 浏览器控制台js代码与后台不同步

    原因:浏览器会缓存js 如果是将js代码直接通过<script>标签插入jsp页面中则不存在这个问题 在加载页面的时候会重新加载js代码 如果直接将js代码以文件的形式引入,那么每次在修改 ...

  7. window.close(); 关闭浏览器窗口js代码的分析总结

    序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

  8. window.close(); 关闭浏览器窗口js代码

    序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

  9. IE浏览器部分js代码不生效的问题

    [小小坑记录] 问题描述:IE浏览器写好功能代码之后,在调试模式下程序能正常运行.不开启调试模式正常访问时js部分功能代码不生效. 原因:在测试时用了console对象在控制台输出一一些内容,而IE的 ...

随机推荐

  1. iOS项目开发中的知识点与问题收集整理①(Part 一)

    前言部分 注:本文并非绝对原创 大部分内容摘自 http://blog.csdn.net/hengshujiyi/article/details/20943045 文中有些方法可能已过时并不适用于现在 ...

  2. CodeMirror简介

    Javascript由于其作为Web标准的独特地位,很多人甚至希望它能一统前后端开发. Javascript的本质工作首先肯定的Web前端开发,本文主要想介绍的CodeMirror是一款Web Edi ...

  3. CentOS6.8 修改主机名(1)

    1.临时修改主机名   显示主机名:spark@master:~$ hostnamemaster修改主机名:spark@master:~$ sudo hostname hadoopspark@mast ...

  4. solr添加多个core

    在D:\solr\solr_web\solrhome文件夹下: 1)创建core0文件夹 2)复制D:\solr\solr_web\solrhome\configsets\basic_configs/ ...

  5. 4.5 .net core下直接执行SQL语句并生成DataTable

    .net core可以执行SQL语句,但是只能生成强类型的返回结果.例如var blogs = context.Blogs.FromSql("SELECT * FROM dbo.Blogs& ...

  6. linux安装中文字体

    一.查看系统字体 在开始安装之前,我们先查看系统中已经安装的字体. 要查看系统中已经安装的字体,我们可以使用fc-list命令进行查看.如果系统中没有该命令的话,我们需要先安装相关的软件包. 在cen ...

  7. dubbo连接zookeeper注册中心因为断网导致线程无限等待问题【转】

    最近维护的系统切换了网络环境,由联通换成了电信网络,因为某些过滤规则导致系统连不上zookeeper服务器(应用系统机器在深圳,网络为电信线路,zookeeper服务器在北京,网络为联通线路),因为我 ...

  8. Android中使用Notification实现进度通知栏(Notification示例三)

    我们在使用APP的过程中,软件会偶尔提示我们进行版本更新,我们点击确认更新后,会在通知栏显示下载更新进度(已知长度的进度条)以及安装情况(不确定进度条),这就是我们今天要实现的功能.实现效果如下: 在 ...

  9. text-overflow

    text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsis: 当 ...

  10. 64位下pwntools中dynELF函数的使用

    这几天有同学问我在64位下怎么用这个函数,于是针对同一道题写了个利用dynELF的方法 编译好的程序 http://pan.baidu.com/s/1jImF95O 源码在后面 from pwn im ...