阻击移动端缩放：驯服放肆的手势

移动设备上无处不在的缩放功能

随着智能手机的普及，移动网络浏览已成为我们的日常习惯。然而，移动浏览器上缩放功能带来的困扰也不容小觑。双击放大或双指手势轻捏即可放大网页，这在某些情况下确实有用，但往往也会造成意外放大，打断阅读体验。尤其对于开发人员来说，无法控制缩放可能会给布局带来挑战。

iOS 与 Android 之间的差异

iOS 和 Android 系统在缩放处理上存在着差异。在 iOS 10 之前，可以通过 meta 标签 来禁止页面缩放。但在 iOS 10 中，该设置不再适用于 Safari 浏览器。

驯服缩放怪兽

为了解决移动端缩放问题，我们必须针对不同浏览器和平台采用不同的策略。

iOS Safari：禁用双指缩放

在 iOS Safari 中，无法通过 meta 标签禁用缩放。但是，我们可以使用 JavaScript 禁止双指缩放：

document.addEventListener('touchmove', function(e) {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
});

安卓浏览器：禁用双击缩放

在 Android 浏览器中，可以通过 meta 标签禁用双击缩放：

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

解决双击缩放与双指缩放

为了同时解决双击和双指缩放问题，我们可以将上述方法结合起来。

document.addEventListener('touchmove', function(e) {
  if (e.touches.length > 1 || e.scale !== 1.0) {
    e.preventDefault();
  }
});

使用 CSS 控制缩放

在某些情况下，CSS 也可以用于控制缩放。例如，可以通过设置 overflow: hidden 来防止页面超出视口范围，从而阻止双指缩放：

body {
  overflow: hidden;
}

启用特定缩放场景

虽然禁用缩放通常是理想选择，但在某些情况下，我们可能希望允许有限的缩放。例如，在查看地图或图像时。我们可以使用 JavaScript 检测缩放事件，并根据需要启用或禁用缩放功能。