[React] 画面タッチによるピンチズーム操作を無効にする

2021.09.13

こんにちは、CX事業本部 IoT事業部の若槻です。

Reactで実装したWebアプリケーションで、スマートフォンやタブレットで使われた場合に、画面タッチによるピンチズーム(ピンチイン/ピンチアウト)の操作を行わせたくないという要件がありました。

今回は、Reactアプリケーションで画面タッチによるピンチズーム操作を無効にする方法を確認してみました。

確認した端末、ブラウザ

検証は下記の端末、ブラウザで行いました。

  • Androidスマートフォン
    • Google Chrome
  • Windowsタブレット
    • Google Chrome
    • Microsoft Edge
    • Firefox

ピンチズームを無効にできた実装

下記の実装の場合はいずれの端末、ブラウザでもピンチズームが無効化されました。

const touchHandler = (event: any) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};
document.addEventListener('touchstart', touchHandler, {
  passive: false
});

タッチイベントタイプのtouchstartのうち2点以上のタッチによるアクションをpreventDefault()により無効化しています。

検証に使用したCodeSandboxの環境。

ピンチズームを無効にできなかった実装

下記の実装の場合はいずれの端末、ブラウザでもピンチズームが無効化されませんでした。

user-scalable=no

Metaタグでcontent="user-scalable=no"を指定してもピンチズームは可能なままでした。

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" content="user-scalable=no" />

検証に使用したCodeSandbox環境。

touch-action: none

styles.css

.App {
  touch-action: none;
}

CSSスタイルでtouch-action: noneを指定することによりジェスチャーを無効にできるとのことですが、上手く動作しませんでした。

none
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。

検証に使用したCodeSandbox環境。

touch-action: manipulation

styles.css

.App {
  touch-action: manipulation;
}

下記で紹介されていた方法でしたが、上手く動作しませんでした。

MDNのドキュメントを読む限りは通常のピンチズーム操作は無効にでき無さそうです。

manipulation
パンおよびズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。これは "pan-x pan-y pinch-zoom" の別名です (互換性のために、これも有効です)。

検証に使用したCodeSandbox環境。

参考

以上