CSSのtouch-actionを使ってiOSのSafariでUIをダブルタップしても画面が拡大・縮小しないようにする 🔍

iOSのSafariでbuttonタグを連打した際、ダブルタップと判定され、画面が拡大・縮小する現象に困っていました。

https://develop.kimizuka.org/touch-action/auto/ をiOS16.13.1のSafariで確認した様子
ボタンをダブルタップすると画面が拡大・縮小する

かつては、JavaScriptでtouchendをpreventDefaultしたりしてダブルタップを無効にしようとしていましたが、CSSの touch-action で制御できることを知ったので試してみました。

デフォルト値なので、ボタンをダブルタップすると画面が拡大・縮小します。

touch-actionの値をmanipulationに設定すると、ダブルタップしても画面が拡大・縮小しません。これは便利です。
ただし、フォントサイズが16pxを下回るinputタグにフォーカスを当てた際の拡大は止まりません。残念です。

touch-actionの値をnoneにすると、ダブルタップに加え、ピンチイン・ピンチアウトも無効になります。若干やり過ぎな気がします。
しかも、フォントサイズが16を下回るinputタグにフォーカスを当てて画面を拡大した際に、戻せなくなります。これはまずいです。

結論としては、ゲームをつくる際などダブルタップでの拡大を無効にしたい場合は、ラッパーとなる要素に touch-action: manipulation; を当てておくのが良さそうだと思いました。iOSだと13以降で使えるようです。

みかづきブログ・カスタム