【iOS】input要素の自動ズームを簡単に無効化する方法

一般的なHTMLのviewportメタ設定を使用している場合、iOSデバイスでinput要素をタップすると自動的にズームが発生します。少なくともスマートフォンではその挙動が確認できます。筆者はiPhone 4、5、6でSafariとChromeを使って検証しましたが、調査によるとすべてのiOSデバイスで同じ仕様になっているようです。

この自動ズームを引き起こすHTMLコードがこちらです。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

しかし、この自動ズームは必ずしも望ましいものとは限りません。場合によってはWebアプリのユーザビリティを損なう原因にもなります。採用するかどうかは、すべてコンテキスト次第です。

SafariとChromeの両方でこの挙動を無効にしたい場合は、代わりに以下のコードを使用します。

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>

変更点はひとつだけで、metaタグのcontent属性にmaximum-scale=1という値を追加しただけです。

重要な注意点

この設定は、Safariにおける手動でのピンチイン・ピンチアウトによるズーム操作を無効にするものではありません。あくまで自動ズーム機能だけをオフにします。

一方、iOSデバイス上のChromeモバイルブラウザでは、手動ズーム自体が無効になってしまいます。これはユースケースによっては大きな問題になり得ます。

Chromeで手動ズームを維持しつつ自動ズームだけを防ぐ、純粋なHTMLのみの解決策は現時点で見つかっていません。発見できたら、この記事を更新する予定です。

もっとシンプルな解決策

input要素のフォントサイズを、デフォルトの11pxではなく最低16pxに設定すると、SafariとChromeの両方で自動ズームが発生しなくなります。少なくとも筆者のテスト環境ではその結果でした。

この方法なら、content属性にmaximum-scale=1を追加する必要がないため、Chromeで手動ズームを制限してしまうリスクも回避できます。

「なぜ最初にこの方法を提案しなかったのか？」

それは、モバイルのすべての入力フィールドに16pxのフォントサイズを使いたくないケースがあるからです。この方法を採用すると、入力フィールドに合わせてモバイルUI全体のタイポグラフィを調整する必要が出てきます。

また、ほとんどの技術的課題と同様に、この問題もJavaScriptを使えばプログラム的に回避することは可能ですが、本記事の範囲を超えるためここでは割愛します。

さらに留意すべき点として、ユーザーのズーム操作を制限することは一般的には推奨されていません。詳細はW3Schoolsなどの資料を参照してください。ただし、これも結局はプロジェクトのコンテキスト次第です。

すべてのデバイスを一括で解決できるシンプルな設定が存在すれば理想的ですね。このトピックについて何か知見をお持ちの方は、ぜひコメント欄でお知らせください:-)