【Cordova】iOSアプリで画面のズームを禁止する

2020-07-24 HTML, CSS

今日、Cordova のアプリを操作していて、偶然 iOS アプリでズームができてしまうことを発見したので、その対処法について。
すでに無効にしているとばかり思っていたので、ちょっと驚きました。

参考にさせていただいたサイトはこちら。

iOS Safari でダブルタップによるズームを防ぐには touch-action: manipulation が一番簡単 – Corredor
https://neos21.hatenablog.com/entry/2018/12/22/080000

こちらの記事によると、以前までは HTML の <meta> 要素に user-scalable=no を指定すれば良かったらしいのですが、この方法は iOS 10 以降で使用できなくなったとのこと。
ちなみに、使用する場合は下記のように指定します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

なので、こちらの代わりとして、CSS で <html> 要素に touch-action: manipulation; を指定するという方法があるとのことでした。
こちらを指定すると、ダブルタップでのズームを無効にできるそうです。
サンプルコードは下記の通りです。

html {
  touch-action: manipulation;
}

私は上記の 2つを両方とも追加してから、再度アプリをビルドし、実行しました。
で、実機で確認したところ、無事に iOS アプリでズームを無効にすることができました！
ダブルタップだけでなく、ピンチアウトしても画面のズームはできなくなっていました。
これで一安心です！

以上、Cordova で開発した iOS アプリでズームを無効にする方法でした。
ご参考になれば幸いです。