H5禁止页面双指缩放的方法汇总

迷途小码农零零发

已于 2024-06-27 16:35:14 修改

阅读量446

点赞数 2

分类专栏：前端知识库文章标签： javascript 前端 html5

于 2024-06-19 14:52:40 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/139803087

版权

前端知识库专栏收录该内容

13 篇文章 0 订阅

订阅专栏

H5禁止页面双指缩放的方法主要有以下几种：

使用meta标签：在HTML文件的head部分，可以添加一个meta标签来禁止用户缩放页面。

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

使用CSS：在CSS中，可以使用touch-action属性来禁止用户缩放页面。

body {
  touch-action: manipulation;
}

使用JavaScript：在JavaScript中，可以监听touchstart事件，当触摸点超过1个时，阻止默认行为，从而禁止缩放。

document.addEventListener('touchstart', function (event) {
  // 当触摸点超过1个时，你阻止了默认行为。
  // 只有在用户试图进行缩放（通常需要两个触摸点）或其他需要多点触控的操作时，才会阻止默认行为。单点触控的操作，如点击、滑动等，不会被影响。
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, { passive: false });