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

134 阅读 0 评论 89 点赞

我是靠谱客的博主幸福外套，这篇文章主要介绍Vue项目移动端禁止页面放大缩小，现在分享给大家，希望可以做个参考。

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

在安卓上可以实现禁止放大缩小，但是ios就不行

复制代码

1
2
3
// index.html 中添加 meta 标签
<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">

查询才知道对于IOS10以上的苹果机子，上述方法是行不通的，可以尝试以下的方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//在 src / app.vue 中 script 标签内添加代码
<script>
window.onload = function() {
document.addEventListener('touchstart', function(e) {
console.log("1",e.touches.length)
if (e.touches.length > 1) {
e.preventDefault()
}
})
document.addEventListener('gesturestart', function(e) {
console.log("2")
e.preventDefault()
})
}
</script>