众所周知：移动端页面禁止用户缩放界面只需加上<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>

获取当前页面浏览器的缩放大小：

// 判断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>

　　

js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小的更多相关文章

  1. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  2. js判断是pc端还是移动端

    function checkMobile() { var pda_user_agent_list = new Array("2.0 MMP", "240320" ...

  3. 移动端，PC端，微信等常用平台和浏览器判断

    var wzw={ //浏览器相关信息 //android webview 需要app进行支持,Android web view初始化时,在navigator中添加标识 browser:{ versi ...

  4. JS手机访问PC端网站自动跳转到手机端网站

    <script type="text/javascript"> //移动端url跳转,自定义部分开始 function mobile_device_detect(url ...

  5. 关于禁止微信端webapp内部下拉出现QQ浏览器的问题

    <!DOCTYPE html> <html> <head> <title></title> </head> <style ...

  6. 禁止 PC端打开网页 进行跳转

    try {var urlhash = window.location.hash;if (!urlhash.match("fromapp")){if ((navigator.user ...

  7. js判断是否pc端

    function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ['Android', 'iPhone', 'Symbi ...

  8. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  9. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

随机推荐

  1. go语言学习-数组-切片-map

    数组 go语言中数组的特点: 数组的长度是固定的,并且长度也是数组类型的一部分 是值类型,在赋值或者作为参数传递时,会复制整个数组,而不是指针 定义数组的语法: var arr1 = [5]int{1 ...

  2. Fibonacci Modified

    题目来源:Fibonacci Modified We define a modified Fibonacci sequence using the following definition: Give ...

  3. Python学习——迭代器&生成器&装饰器

    一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退迭代器的一大优点是不要求事先准备好整个迭代过程中所有的元素.迭代器仅 ...

  4. loj#2665. 「NOI2013」树的计数

    目录 题目链接 题解 代码 题目链接 loj#2665. 「NOI2013」树的计数 题解 求树高的期望 对bfs序分层 考虑同时符合dfs和bfs序的树满足什么条件 第一个点要强制分层 对于bfs序 ...

  5. luoguP4709 信息传递 置换 + 多项式exp

    感觉我的做法并不是最优做法... 考虑一个置换\(g\)中的一个置换环\(S\) 在\(g^n\)的形态中,它变为了\(gcd(n, |S|)\)个长度相同的置换环 那么,我们考虑对\(f\)的所有置 ...

  6. POJ 2417 Discrete Logging BSGS

    http://poj.org/problem?id=2417 BSGS 大步小步法( baby step giant step ) sqrt( p )的复杂度求出 ( a^x ) % p = b % ...

  7. 通俗讲解 异步，非阻塞和 IO 复用

    1. 阅前热身 为了更加形象的说明同步异步.阻塞非阻塞,我们以小明去买奶茶为例. 1.1 同步与异步 同步与异步的理解 同步与异步的重点在消息通知的方式上,也就是调用结果通知的方式. 同步: 当一个同 ...

  8. Ping监控脚本

    需求 内网服务器之间高频率检验延时信息, 脚本特点 多进程,可同时异步监控多个地址,不会互相影响. 使用方式 创建文件夹(可以替换为你自己的,我这里就用我们生产环境的标准目录了) mkdir /dat ...

  9. iphone程序适配ipad可以用下面的宏进行尺寸改写

    //判断是否为iPad #define ISIPAD [[[UIDevice currentDevice].model substringToIndex:4] isEqualToString:@&qu ...

  10. ArcGIS教程：曲率

    摘要 计算栅格表面的曲率,包括剖面曲率和平面曲率. 用法 · 主要输出结果为每个像元的表面曲率,该值通过将该像元与八个相邻像元拟合而得.曲率是表面的二阶导数,或者可称之为坡度的坡度.可供选择的输出曲率 ...