この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、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環境。
参考
- jquery - Javascript - How to stop pinch zoom, multi touch input attacks? - Stack Overflow
- タッチパネルのピンチズームを無効化する - Qiita
以上