vue实现禁止浏览器网页缩放方法一和方法二可同时设置

Posted 2023-01-06 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现禁止浏览器网页缩放方法一和方法二可同时设置相关的知识，希望对你有一定的参考价值。

博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

文章目录

简介：这是一篇有关【vue实现禁止浏览器网页缩放【方法一和方法二可同时设置】】的文章，博主用最精简的语言去表达给前端读者们。

1、方法一 public/index.html

在<head> </head> 内添加如下代码：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

2、方法二根文件（App.vue）

  created() 
    window.addEventListener(
      "mousewheel",
      function (event) 
        if (event.ctrlKey === true || event.metaKey) 
          event.preventDefault();
        
      ,
       passive: false 
    );

    //firefox
    window.addEventListener(
      "DOMMouseScroll",
      function (event) 
        if (event.ctrlKey === true || event.metaKey) 
          event.preventDefault();
        
      ,
       passive: false 
    );
  ,

3、方法三 CalibrationOfBrowser.js

创建CalibrationOfBrowser.js 文件

// ————————————————————————————————————
// |			校正浏览器缩放 			|
// ————————————————————————————————————

class CalibrationOfBrowser 
  constructor() 
  // 获取系统类型
  _getSystem() 
    var agent = navigator.userAgent.toLowerCase();
    // var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    // if(isMac) 
    // 	return false;
    // 
    // 现只针对windows处理，其它系统暂无该情况(如有请继续在此添加)
    if (agent.indexOf("windows") >= 0) 
      return true;
    
  
  //监听方法兼容写法
  _addHandler(element, type, handler) 
    if (element.addEventListener) 
      element.addEventListener(type, handler, false);
     else if (element.attachEvent) 
      element.attachEvent("on" + type, handler);
     else 
      element["on" + type] = handler;
    
  
  //校正浏览器缩放比例
  _correct() 
    let t = this;
    //页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小
    // 来抵消devicePixelRatio带来的变化。
    document.getElementsByTagName("body")[0].style.zoom =
      1 / window.devicePixelRatio;
  
  //监听页面缩放
  _watch() 
    let t = this;
    //注意这个方法是解决全局有两个window.resize
    t._addHandler(window, "resize", function () 
      //重新校正
      t._correct();
    );
  
  //初始化页面比例
  init() 
    let t = this;
    //判断设备，目前只在windows系统下校正浏览器缩放比例
    if (t._getSystem()) 
      //初始化页面校正浏览器缩放比例
      t._correct();
      //开启监听页面缩放
      t._watch();
    
  

export default CalibrationOfBrowser;

App 根文件引用

<script>
import CalibrationOfBrowser from "./utils/CalibrationOfBrowser";
export default 
  created() 
   new CalibrationOfBrowser().init();
  

</script>

vue实现禁止浏览器网页缩放方法一和方法二可同时设置

博主介绍

文章目录

1、方法一 public/index.html

2、方法二 根文件（App.vue）

3、方法三 CalibrationOfBrowser.js

相关推荐

2、方法二根文件（App.vue）