如何在移动设备的网站上禁用捏合缩放 - CSS

在移动设备上，用户可以通过捏合手势缩放网页内容。但是在某些情况下，我们可能想要禁用这种缩放方式。在本文中，我们将讨论如何通过CSS实现禁用捏合缩放。

禁用捏合缩放

要禁用捏合缩放，我们可以使用以下CSS样式：

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

在上面这个meta标签里，我们设置了以下的属性：

• width=device-width：网页宽度等于设备的宽度；
• initial-scale=1：初始的缩放比例为1；
• maximum-scale=1：最大的缩放比例为1；
• user-scalable=no：禁用用户缩放。

如果你想在CSS中实现相同的效果，可以使用以下样式：

html {
  -ms-touch-action: none;
      touch-action: none;
}

body {
  overflow: hidden;
}

在上面的代码中，我们使用了-ms-touch-action和touch-action属性来禁用触摸操作。同时，我们将body元素的overflow属性设置为hidden，以防止页面在移动设备上出现滚动条。

路径

• Markdown：./README.md
• HTML：无