Safariのダブルタップズームをcss1行で無効化

viewport meta タグは効かない
CSSで解決する：touch-action: manipulation
1. 特定の要素だけに適用したい場合
2. ピンチズームも止めたい場合
JavaScriptで解決する：フォールバック用
CSSとJavaScriptの併用：完全版
アクセシビリティ——無効化しすぎないこと
各手法の比較
まとめ

Safariでボタンを連打するとダブルタップズームが誤発動する問題は、CSSにtouch-action: manipulationを1行追加するだけで解決できます。

ピンチズームは残るのでアクセシビリティも損なわれず、タップの350ms遅延も同時に解消されます。

私がこの問題に遭遇したのは、数値入力フォームを含むWebアプリの開発中でした。ブラウザ標準のステップボタンがスマホでは小さすぎるので独自の＋/−ボタンを実装したところ、PCでは完璧に動くのにiPhoneでは素早くタップするたびにページがズームしてしまう。

Safariは素早い2回タップをダブルタップズームとして処理します。デスクトップ向けサイトの拡大表示用の機能ですが、モバイルファーストのWebアプリではこれが邪魔になります。カウンターUI、ゲーム、スライダー、ドローイングキャンバスなど、連続タップが必要な場面では致命的です。

検証環境：iPhone 15 Pro（iOS 18.2）/ Safari、iPhone SE 第3世代（iOS 17.5）/ Safari、Chrome 131 for Android

viewport meta タグは効かない

結論：user-scalable=noは現在のSafariでは無視されます。この方法では解決できません。

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

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

多くの記事でまず紹介されるこの方法ですが、iOS 10以降、Appleはアクセシビリティの観点からuser-scalable=noとmaximum-scale=1.0を意図的に無視するようにしました。視覚に障害のあるユーザーにとってズーム機能は不可欠だからです。

この方針自体は正しいと思います。ただ、開発者としてはダブルタップズーム「だけ」を止めたいわけで、別のアプローチが必要でした。私も最初にこれを試して効かず、30分ほど無駄にしました。

CSSで解決する：touch-action: manipulation

結論：CSSを1行追加するだけで解決します。これが最も推奨される方法です。

body {
  touch-action: manipulation;
}

body {

touch-action: manipulation;

}

manipulationは「パン（スクロール）とピンチズームは許可するが、ダブルタップズームは無効にする」という値です。

推奨できる理由は3つあります。

第一に、ピンチズームが生きている。ダブルタップズームだけを止めて、指2本でのズームは残る。アクセシビリティを損なわずに問題を解決できます。

第二に、タップの350ms遅延が解消される。Safariはダブルタップかシングルタップかを判定するために最初のタップから約350ms待ってからクリックイベントを発火します。touch-action: manipulationを設定するとダブルタップ判定が不要になるのでこの遅延がなくなり、ボタンの反応が体感的にかなり速くなります。

第三に、ブラウザサポートが十分。iOS Safari 9.3以降、Chrome for Android 36以降、Samsung Internet、Firefox for Androidでサポートされています。2025年現在、実質的にすべてのモバイルブラウザで動きます。

私の場合、数値入力フォームのボタンにこの1行を追加しただけで問題は完全に解決しました。

特定の要素だけに適用したい場合

結論：ページ全体ではなく、必要な要素だけに絞って適用できます。アクセシビリティの観点からはこちらが望ましいです。

button,
.game-canvas,
.slider-control,
.rapid-tap-button {
  touch-action: manipulation;
}

button,

.game-canvas,

.slider-control,

.rapid-tap-button {

touch-action: manipulation;

}

ページ全体にかけると、テキスト部分でもダブルタップズームが効かなくなります。連打が必要なボタンやインタラクティブな領域だけに適用すれば、通常のテキスト閲覧ではズーム機能が使えるままになります。

ピンチズームも止めたい場合

結論：pan-yを使えばピンチズームも無効化できます。ただし本当に必要な場面だけに限定してください。

body {
  touch-action: pan-y;  /* 縦スクロールのみ許可 */
}

body {

touch-action: pan-y; /* 縦スクロールのみ許可 */

}

ゲームやドローイングアプリなどピンチ操作も邪魔になるケースで使います。横スクロールも必要ならpan-x pan-yにします。

カルーセルなど横スクロールが必要な子要素がある場合は、個別にオーバーライドできます。

body {
  touch-action: pan-y;
}
.horizontal-scroll-container {
  overflow-x: scroll;
  touch-action: pan-x pan-y;
}

body {

touch-action: pan-y;

}

.horizontal-scroll-container {

overflow-x: scroll;

touch-action: pan-x pan-y;

}

JavaScriptで解決する：フォールバック用

結論：CSSのtouch-actionがサポートされていない環境（iOS 9.2以前）向けのフォールバックです。現在ではほぼ不要ですが、念のため併用すると堅牢です。

タッチ終了のたびに前回からの経過時間をチェックし、300ms以内の連続タッチならデフォルト動作（ズーム）を止める仕組みです。

基本：ダブルタップを検知して無効化する

(function() {
  let lastTouchEnd = 0;

  document.addEventListener('touchend', function(event) {
    const now = Date.now();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
})();

(function() {

let lastTouchEnd = 0;

document.addEventListener('touchend', function(event) {

const now = Date.now();

if (now - lastTouchEnd <= 300) {

event.preventDefault();

}

lastTouchEnd = now;

}, false);

})();

座標も考慮する場合

結論：同じ場所をダブルタップした場合だけズームを止め、離れた位置のタップは通常通り処理したいなら、座標チェックを追加します。

(function() {
  let lastTouchEnd = 0;
  let lastTouchX = 0;
  let lastTouchY = 0;

  document.addEventListener('touchend', function(event) {
    const now = Date.now();
    const touch = event.changedTouches[0];
    const x = touch.clientX;
    const y = touch.clientY;

    const timeDiff = now - lastTouchEnd;
    const distX = Math.abs(x - lastTouchX);
    const distY = Math.abs(y - lastTouchY);

    // 300ms以内 かつ 半径30px以内 → ダブルタップとみなす
    if (timeDiff <= 300 && distX < 30 && distY < 30) {
      event.preventDefault();
    }

    lastTouchEnd = now;
    lastTouchX = x;
    lastTouchY = y;
  }, false);
})();

(function() {

let lastTouchEnd = 0;

let lastTouchX = 0;

let lastTouchY = 0;

document.addEventListener('touchend', function(event) {

const now = Date.now();

const touch = event.changedTouches[0];

const x = touch.clientX;

const y = touch.clientY;

const timeDiff = now - lastTouchEnd;

const distX = Math.abs(x - lastTouchX);

const distY = Math.abs(y - lastTouchY);

// 300ms以内かつ半径30px以内 → ダブルタップとみなす

if (timeDiff <= 300 && distX < 30 && distY < 30) {

event.preventDefault();

}

lastTouchEnd = now;

lastTouchX = x;

lastTouchY = y;

}, false);

})();

時間だけでなく距離も条件に加えることで、画面の別の場所をタップした場合は通常通りの動作になります。

ピンチズームもJSで止める場合

document.addEventListener('touchmove', function(event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, { passive: false });

// Safari固有のgestureイベントも防止
document.addEventListener('gesturestart', function(e) { e.preventDefault(); }, false);
document.addEventListener('gesturechange', function(e) { e.preventDefault(); }, false);

document.addEventListener('touchmove', function(event) {

if (event.touches.length > 1) {

event.preventDefault();

}

}, { passive: false });

// Safari固有のgestureイベントも防止

document.addEventListener('gesturestart', function(e) { e.preventDefault(); }, false);

document.addEventListener('gesturechange', function(e) { e.preventDefault(); }, false);

touchmoveのリスナーには{ passive: false }が必要です。Chromeではデフォルトでpassiveがtrueになっているため、明示的にfalseを指定しないとpreventDefault()が無視されます。

CSSとJavaScriptの併用：完全版

結論：CSSをメイン、JavaScriptをフォールバックにする構成がいちばん堅牢です。両方同時に入れても競合しません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ダブルタップズーム無効化デモ</title>
  <style>
    /* CSS（モダンブラウザ向け） */
    * {
      touch-action: manipulation;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      padding: 20px;
    }
    .tap-button {
      padding: 20px 40px;
      font-size: 18px;
      background: #007AFF;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }
    .counter {
      font-size: 48px;
      margin: 30px 0;
    }
  </style>
</head>
<body>
  <h1>ダブルタップズーム無効化テスト</h1>
  <p>ボタンを素早く連打しても、ズームしません。</p>

  <div class="counter">0</div>
  <button class="tap-button">タップしてカウント</button>

  <script>
    // JavaScript（レガシーブラウザ向けフォールバック）
    (function() {
      let lastTouchEnd = 0;
      document.addEventListener('touchend', function(event) {
        const now = Date.now();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    })();

    // カウンター
    const counter = document.querySelector('.counter');
    const button = document.querySelector('.tap-button');
    let count = 0;
    button.addEventListener('click', function() {
      count++;
      counter.textContent = count;
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ダブルタップズーム無効化デモ</title>

<style>

/* CSS（モダンブラウザ向け） */

* {

touch-action: manipulation;

}

body {

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

padding: 20px;

}

.tap-button {

padding: 20px 40px;

font-size: 18px;

background: #007AFF;

color: white;

border: none;

border-radius: 10px;

cursor: pointer;

}

.counter {

font-size: 48px;

margin: 30px 0;

}

</style>

</head>

<body>

<h1>ダブルタップズーム無効化テスト</h1>

<p>ボタンを素早く連打しても、ズームしません。</p>

<button class="tap-button">タップしてカウント</button>

// JavaScript（レガシーブラウザ向けフォールバック）

(function() {

let lastTouchEnd = 0;

document.addEventListener('touchend', function(event) {

const now = Date.now();

if (now - lastTouchEnd <= 300) {

event.preventDefault();

}

lastTouchEnd = now;

}, false);

})();

// カウンター

const counter = document.querySelector('.counter');

const button = document.querySelector('.tap-button');

let count = 0;

button.addEventListener('click', function() {

count++;

counter.textContent = count;

});

</script>

</body>

</html>

CSSのtouch-actionが効くブラウザではCSSが仕事をし、効かないブラウザではJavaScriptがフォールバックとして機能します。

アクセシビリティ——無効化しすぎないこと

結論：touch-action: manipulationが推奨される最大の理由はアクセシビリティです。ダブルタップズームだけを止めてピンチズームを残す、この線引きが開発者の都合とユーザーの利便性を両立させます。

視覚に障害のあるユーザーにとって、ズーム機能はWebを使うための基本的な手段です。manipulationはダブルタップだけを止めてピンチズームは残すので、この層のユーザーへの影響が最小限に抑えられます。

どうしてもピンチズームも止める必要がある場合（ゲームやキャンバスアプリなど）は、ページ全体ではなく該当要素だけに限定し、フォントサイズ変更ボタンなどの代替手段を提供するのがベターです。

各手法の比較

手法	ダブルタップズーム	ピンチズーム	サポート	おすすめ度
`touch-action: manipulation`	無効	有効	iOS 9.3+	★★★★★
`touch-action: pan-y`	無効	無効	iOS 9.3+	★★★☆☆
JavaScript制御	無効	設定次第	全ブラウザ	★★★☆☆
viewport meta	無視される	無視される	—	★☆☆☆☆