入力要素の自動ズームをすばやく無効にする方法（iOS）

最も一般的なHTMLビューポートメタ設定を使用する場合、入力要素をクリックすると、iOSデバイスで自動ズームが自動的にトリガーされます。少なくともスマートフォンでは。 SafariとChromeブラウザを使用して、iPhone 4、5、6でこれをテストしました。私の調査によると、すべてのiOSデバイスで同じです。

このHTMLコードは、自動ズーム効果を発生させるものです：

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

しかし、この自動ズーム効果は必ずしも望ましいものではありません。時々それはあなたのウェブアプリの使いやすさを損なうでしょう。それは完全に文脈に依存します。

SafariとChromeの両方でこの効果を無効にするには、代わりに次を使用できます。

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

唯一の新しいコードは、値maximum-scale=1を追加したことです。 メタcontent 属性。

重要

これにより、手動のオプションが無効になることはありません。 Safariでズームインおよびズームアウトします。自動ズーム機能を無効にするだけです。

ただし、Chromeのモバイルブラウザ（iOSデバイスの場合）では、 手動ズームオプションを無効にします。ユースケースによっては、これが問題になる可能性があります。

Chromeで手動ズームを維持できる純粋なHTMLソリューションはまだ見つかりません。もしそうなら、この記事を更新します。

はるかに簡単なソリューション

入力要素にデフォルトの11pxではなく16pxの最小フォントサイズを指定すると、SafariとChromeの両方で自動ズーム効果が削除されます。少なくとも私のテストではそうだった。

この方法を使用すると、コンテンツ属性にmaximum-scale-1値を追加することを回避できるため、Chromeでの手動ズームの制限を回避できます

待って、最初にこのソリューションを提案しなかったのはなぜですか？

モバイルのすべての入力フィールドで16pxのフォントサイズを使用したくない場合があります。これにより、入力フィールドに対応するようにモバイルUIのタイポグラフィを調整する必要があります。

そして、ほとんどすべての場合と同様に、この問題はJavaScriptを使用してプログラムで回避できますが、それはこの記事の範囲を超えています。

また、ユーザーによるズームの制限は一般的に推奨されていないことに注意してください。 W3Schoolsで詳細をご覧ください。しかし、繰り返しになりますが、それはコンテキストによって異なります。

すべてのデバイスでこの問題に一度に対処できる簡単な設定があればいいのにと思います。このトピックについて何か洞察があれば、下のコメントセクションで私に知らせてください:-)