阻止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. Delphi_01_控制台版HelloWorld

    对于Windows下的控制台编程,我相信很多人都不陌生.而C语言开始的著名的“Hello world”程序基本是学习编程的第一步.我想对于 RAD开发,大家熟悉的一般都是GUI编程,而对于consol ...

  2. CentOS6.7搭建LNMP环境

    1:查看环境: [root@localhost ~]# cat /etc/redhat-release 2:关掉防火墙 #重启后生效开启 [root@localhost ~]# chkconfig i ...

  3. swift 如何在IOS应用图标上添加消息数

    在应用图标右上角添加消息数提醒,可以很方便的告知用户该应用中有无新消息需要处理.下面用xcode 7.3.1来简要说明一下如何用swift语言进行此功能的实现. 1.修改 AppDelegate.sw ...

  4. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  5. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  6. 国外远控软件DarkComet-RAT

    下载地址:[点此下载] 使用步骤: 注册noip.org账号创建主机地址. 安装并配置DUC. 配置监听端口 配置NO-IP Updater 然后点击Update ,配置成功则会提示Success. ...

  7. MapReduce 的架构

    主从结构 主节点,只有一个 : JobTracker   ,JobTracker 一般情况下,运行在 namenode 这台机器上. 从节点,有很多个 : TaskTrackers  ,  部署在剩下 ...

  8. 消费RabbitMQ时的注意事项，如何禁止大量的消息涌到Consumer

    按照官网提供的订阅型写法( Retrieving Messages By Subscription ("push API")) 我发现,RabbitMQ服务器会在短时间内发送大量的 ...

  9. 安装phpstudy之后发现80端口被占用

    安装phpstudy之后发现80端口被占用: 进入cmd的界面,在输入"netstat -ano",按回车键后,会显示当前电脑中程序占用的端口和程序ID等等信息:看到第一条就是:0 ...

  10. JSON-RPC 2.0 规范中文文档

    链接地址如下 http://wiki.geekdream.com/Specification/json-rpc_2.0.html