Vue项目运行页面禁止缩放【移动端和PC端都禁止缩放】解决方案

HuiRonmantic

已于 2024-05-30 17:05:04 修改

阅读量184

点赞数 1

分类专栏：大前端文章标签： vue.js javascript 前端

于 2024-05-29 16:11:46 首次发布

本文链接：https://blog.csdn.net/weixin_41346436/article/details/139298370

版权

大前端专栏收录该内容

22 篇文章 4 订阅 ¥15.90 ¥99.00

订阅专栏

超级会员免费看

Vue项目运行页面禁止缩放【移动端和PC端都禁止缩放】解决方案，有的人手很J,总喜欢放大缩小，从而会导致页面错乱，以下是解决方案，简单有效

效果图PC：滚轮缩放和其他缩放都会禁止

在这里插入图片描述

移动端效果图：各种手机平板都禁止缩放

在这里插入图片描述

代码解决方案：

找到Vue项目下public文件中的index.html,在head标签里分别加入以下两个script脚本内容即可，都在head标签中

  <!-- 禁止在手机端缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 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>