H5禁止页面双击放大的方法汇总

迷途小码农零零发

已于 2024-06-20 10:44:59 修改

阅读量298

点赞数 2

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

于 2024-06-19 15:08:33 首次发布

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

版权

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

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属性来禁止用户双击放大。

html, body {
  touch-action: manipulation;
}

使用JavaScript：在JavaScript中，可以监听touchend事件，当两次触摸结束的时间间隔小于300毫秒时，阻止默认行为，从而禁止双击放大。

let lastTouchEnd = 0;
window.addEventListener('touchend', function (event) {
  const now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

touch-action 是一个 CSS 属性，它用于指定某个元素的触摸行为。touch-action: manipulation; 是这个属性的一个值，它的作用是只允许用户进行平移和缩放操作。

具体来说，touch-action: manipulation; 的效果如下：

pan-x：允许用户通过触摸进行水平滚动。
pan-y：允许用户通过触摸进行垂直滚动。
pinch-zoom：允许用户通过触摸进行缩放。

因此，touch-action: manipulation; 允许用户进行滚动和缩放，但是禁止了其他的触摸行为，如双击放大。这在某些移动端的网页中是非常有用的，因为它可以防止用户不小心触发的双击放大操作。
需要注意的是，touch-action 属性在所有浏览器中的支持情况并不完全一样，所以在使用时需要考虑到浏览器兼容性问题。