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

2023.08.20　Posted by Coding_team

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

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

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

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

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

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

.wrap {
    touch-action: manipulation;
}

.wrap {

touch-action: manipulation;

}

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

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

auto	ブラウザの挙動に従います。
none	すべてのパンやズームを禁止します。
pan-x	水平方向のパン以外を禁止します。
pan-left	左方向以外のパンを禁止します。
pan-right	右方向以外のパンを禁止します。
pan-y	垂直向以外のパンを禁止します。
pan-up	上向以外のパンを禁止します。
pan-down	下向以外のパンを禁止します。
pinch-zoom	複数の指によるパンやズームを有効にします。
manipulation	パン、ズームは有効にしますが、ダブルタップなどによる操作は禁止します。