vue 控制窗口禁止缩放,已解决

注意:不是浏览器窗口禁止缩放

1.vue框架中,index.html文件head标签中加上内容

css 复制代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <script>
      document.addEventListener('mousewheel', function (e) {
        e = e || window.event;
        if ((e.wheelDelta && event.ctrlKey) || e.detail) {
          event.preventDefault();
        }
      }, {
        capture: false,
        passive: false
      });
    </script>
    <style>
      html {
        -ms-content-zooming: none;
      }
    </style>

2.App.vue中加上

css 复制代码
  mounted() {
// 禁止双击缩放
    window.onload = function() {
      document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
          event.preventDefault()
        }
      })
      document.addEventListener('gesturestart', function(event) {
        event.preventDefault()
      })
    }
  },

完活儿!

相关推荐
恰恰兄16 分钟前
webpack性能优化
前端·webpack·node.js
23级二本计科25 分钟前
对Web界面进行简单自动化测试Selenium
前端·数据库
霍志杰2 小时前
iframe加载或者切换时候,短暂的白屏频闪问题解决
前端·javascript·chrome
李小白662 小时前
论坛系统(中-2)
前端
曼汐 .3 小时前
企业网站架构部署与优化-Nginx核心功能
前端·nginx·架构
YUNYINGXIA3 小时前
Python实现Web请求与响应
开发语言·前端·python
愛芳芳3 小时前
vue3+element-plus+pinia完整搭建好看简洁的管理后台
前端·javascript·vue.js
zy happy4 小时前
黑马点评前端Nginx启动失败问题解决记录
java·运维·前端·spring boot·nginx·spring
进取星辰4 小时前
34、React Server Actions深度解析
前端·react.js·前端框架
麻辣香蝈蝈4 小时前
【Vue3】一文学会动态路由和编程式路由的使用
开发语言·前端·javascript·vue.js