浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

今日、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 アプリでズームを無効にする方法でした。
ご参考になれば幸いです。

  • この記事いいね! (1)