Open1
iOS Safariでダブルタップでのパンやズームを無効にする
YuheiNakasakaモバイルのブラウザでダブルタップをした時にパンやズームが発生すると困ることがある。モバイルブラウザゲームやタップを必要とするLPなどだ。
巷の記事をざっと検索するとjavascriptでtouchstartやtouchendのイベントを検知してタップ間の秒数を閾値にして抑制するというやり方が多い。
しかし実際やってみるとわかるが結構挙動が不安定だったりする。
なのでCSSで対応する方が楽。指定は簡単で、
touch-action: manipulation
をルートの要素に指定すると良い。
これで普通のパンやズームは効くが、ダブルタップによるパンやズームは無効になる。iOS Safari9.3以降で使えるのでほぼどのモバイルブラウザでも問題ないはず。
そのほかにもtouch-actionにnoneを指定すると全てのジェスチャーを無効にしたり色々なジェスチャー制御が出来るのでmozillaのドキュメントを見てみると良いと思う。