【2024年最新版】iOS端末でinputタグをfocusした時に拡大してしまう場合の解決方法

RELEASE / 2024.7.24 UPDATE / 2024.07.24

input

iOS

textarea

ズームイン

拡大表示

iOS端末でinputタグやtextareaなどのタグにfocusした際に画面が拡大表示されてしまうことがあります。
この記事ではその原因と解決方法をご紹介したいと思います。

この記事の目次を表示

文字サイズ（font-size）を16px以上にする

iOSの仕様で文字サイズ（font-size）が16pxを下回るとinputタグやtextareaタグ等にfocusした際、拡大表示するようになっています。
これは文字サイズ（font-size）が小さいと視認性が悪くなることに配慮したものだと思われます。

そのため、iOSでinputタグやtextareaタグ等にfocusした際に拡大表示されないようにするためには文字サイズ（font-size）が16px以上になるように設定します。

デザイン上、全体的に文字サイズ（font-size）が小さめで構成されていて、どうしても16pxにしてしまうと他に比べて大きくなりすぎてしまう場合、transform: scale()を使うことで小さくすることが可能です。

// 14pxにしたい場合
font-size: calc(16px * (14 / 16));

// 12pxにしたい場合
font-size: calc(16px * (12 / 16));

これでCSSの指定上は16pxのままですが、擬似的に16px以下の見た目で表示することが出来ます。

viewportの指定を以下のようにすることでiOSでinputタグやtextareaタグ等にfocusした際に拡大表示されなくなります。

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

ただし、このmaximum-scale=1.0の指定はWebアクセシビリティ（WCAG）の問題に違反することになるそうです。

この指定を追加すると解決するというブログが多く存在していますが、注意が必要です。
使用する場合は、このようなデメリットを理解した上で使用するようにしましょう。

いかがでしたか？
iOSで拡大されてしまうのは現時点でのiOSの使用によるものです。そのため、いつかは解消する可能性もあります。
気になるという人はひとまず今回ご紹介した方法で回避していきたいですね。v