Posted at

iphoneでbuttonをダブルタップした時のズームを無効にする

パン機能やピンチズーム機能は有効なまま、ダブルタップ時のズーム機能のような標準でない追加の機能を無効化するには、touch-actionプロパティのmanipulationを使う。

ブラウザによっては、ダブルタップアクション時にズームする機能があり、クリックイベントの発火に若干遅延が発生することがある。MDNでは、この遅延を無効化するために使われたりもする、のように書かれていた。

今回は、

- 連続でタップするようなボタンに対して、クリックイベントの遅延を無くす

- 極端に短い時間の間に複数回タップされた時(ダブルタップ)にモバイルブラウザでズームされる機能を無効化する

ことが目的だったので、cssのtouch-action: manipulation;を採用した。

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action