スマートフォンでフォームに入力しようとしたとき、テキスト入力欄が突然拡大されたり、画面がぐっと寄ってしまった経験はありませんか？

特にiPhoneではよく知られている挙動ですが、Androidでも一部のブラウザーや機種によっては同じような現象が起こることがあります。

この記事では、スマートフォンでよく起こるこの「勝手にズーム」を防ぐために、見た目は16px未満のまま対応できるCSSの書き方をご紹介します。

なぜスマホは入力欄を拡大するの？

スマートフォンでは、文字が小さい入力欄にフォーカスすると、画面が自動的に拡大されることがあります。これは、画面が小さい端末でも文字を読みやすくするための仕様です。

inputやtextareaの文字サイズが16px未満の場合、このズームが発生しやすくなります。Androidでも挙動に差はありますが、同じような現象が起きるケースがあります。

16px以下でズームを防ぐ方法

ズームを防ぐ一番簡単な方法は、入力時のfont-sizeを 16pxにすることです。

とはいえ、見た目は12pxや14pxにしたいケースも多いですよね。そんなときに使えるのが、次の方法です。

<input type="text" class="in-1">
<input type="text" class="in-2">
<input type="text">

.in-1 {
font-size: 14px; /* 見た目は14px */
}

.in-1:focus {
font-size: 16px; /* 入力時は16pxでズーム防止 */
}

.in-2 {
font-size: 12px; /* 見た目は12px */
}

.in-2:focus {
font-size: 16px; /* 入力時は16pxでズーム防止 */
}

実現していること

• 見た目のデザインとしては12px/14pxを維持
• 入力時だけ16pxになり、スマホの強制ズームが発動しない

ただ、設定する上で注意することがあります。

注意点

• フォーカス時に高さが変わることがある
• フォントが 16pxになるため、入力欄の高さが微妙に変わることがある

見た目のブレを抑えるには、

• input の高さを固定する
• line-heightや paddingを少し多めに設定する

などで調整できるので、是非やってみてください。