实现禁止pc和h5页面缩放

最新推荐文章于 2024-05-11 09:31:19 发布

小薛不会打代码

最新推荐文章于 2024-05-11 09:31:19 发布

阅读量708

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46191691/article/details/120949638

版权

移动端页面禁止用户缩放界面只需加上

<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();

最低0.47元/天解锁文章

小薛不会打代码

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现禁止pc和h5页面缩放

移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">pc端确实比较麻烦，用户可以通过如下几种方式来缩放：windows：ctrl + +/-ctrl + 滚轮浏览器菜单栏mac：cammond + +/-浏览器菜单栏由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放
复制链接

扫一扫