MobileSafari でダブルタップしたらズームするのを防ぐ

iOS10 から <meta name="viewport" ... の user-scalable=no の指定が無効になって、ダブルタップしたらズームされるようになった。

読み物系のサイトでは問題ないと思うんだけど、ボタンを連打するようなUIを作っている場合、拡大されるとUXとしてよろしくないので、防ぎたい。

調べたら JS で touch 系のイベントリスナーを登録して、フラグが立ったら preventDefault するようなハックをよく見かけたのだけど、もう少しシンプルにできないか、と思った。
そういえばタッチの振る舞いを決める CSS プロパティがあったことを思い出して、サイト上でのタップ操作をサポートする  |  Web  |  Google Developers を読んだら、touch-action: manipulation; というドンピシャなものがあった。クリック遅延を防止するらしいので、画面をタップした際の click イベントが発火するタイミングにも良い影響があるかもしれない。

touch-action: manipulation ダブルタップ操作を無効にして、ブラウザでのクリック遅延を防止します。 スクロールやピンチズームの処理はブラウザに委ねます。

ベースの CSS に以下の記述を足しておしまい。

html {
  touch-action: manipulation;
}