Vue 移动端禁止页面放大缩小

最新推荐文章于 2025-11-03 10:04:05 发布

转载最新推荐文章于 2025-11-03 10:04:05 发布 · 687 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/fufu_dclt/article/details/105137041

文章标签：

#vue.js #javascript #前端

vue+elementui 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了针对不同移动操作系统的网页适配方法。对于安卓设备，通过在index.html中添加特定的meta标签实现屏幕适配；而对于iOS设备，则是在src/app.vue文件的script标签内加入代码以禁用多点触控缩放功能。

原文链接：https://blog.youkuaiyun.com/fufu_dclt/article/details/105137041

安卓：

在 index.html 中添加 meta 标签。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">

IOS：

在 src / app.vue 中 script 标签内添加代码。

<script>
window.onload = function() {
    document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    })
    document.addEventListener('gesturestart', function(event) {
      event.preventDefault()
    })
  }
</script>