【CSS】iOSのSafariでダブルタップしたときの挙動を指定する

iOSのSafariで画像などをダブルタップすると拡大できる機能があります。

しかし、場合によってはダブルタップで拡大してほしくないこともあると思います。

(ゲーム要素や、メガドロップダウンメニューなど)

そこで、CSSの「touch-action」というプロパティを使って、特定の要素ではダブルタップを無効にする方法をご紹介します。

ダブルタップを無効にする方法

ダブルタップを無効化したい要素に対して以下の記述を追加します。

「touch-action」プロパティはiOS13以降サポートされています。

Can I use

touch-actionに指定できる値

touch-actionプロパティには、以下の値を設定することができます。

参考 : CSS – touch-action – とほほのWWW入門

touch-actionのデモはこちら

この中の「manipulation」値を使ってダブルタップを無効化しましたが、他にも上下・左右スクロールの禁止なども指定できます。

また、pan-left、pan-right、pan-up、pan-down、pinch-zoomの5つに関しては、手元のiOS16のChrome、Safariで動作を確認できませんでした。

「touch-action」を過信・多用するのは注意が必要かもしれません。