📱

iOS で input の focus 時にズームインしてしまうのを viewport で解決する

2020/12/04に公開

こんにちは。ひらやま（@rhirayamaaan）です。

Web を作っているときに input タグや textarea タグで入力領域を作ることがあるかと思います。

実装をし、いざ確認をしてみると、iOS のときに入力しようとした際に少しばかりズームインしてしまうことがあります。

その対処法を示していきます。
※2020/12/04 現在の話です。

`font-size` を `16px` にすればズームインしない

そもそも、iOS の仕様として、font-size の値を 16px 以上に設定すればズームしないようになります。

どういう意図か詳しくはわかりませんが、文字が小さい場合は、入力する際の視認性を上げるためにズームしようという Apple の配慮なのだと思います。

なので、それをくぐり抜けるかのように、以下リンクで紹介されている方法も編み出されています。

こちらで紹介されているのは、font-size: 16px に設定しつつ transform: scale(); で見た目だけ小さくしてしまおうという考えです。

確かに画期的な方法ではありますが、もし font-size を変更したい場合でも transform を変更しないといけない状態となってしまっています。

見た目的な解決はできているのですが、コードを保守していくことを考えるとあまり得策とは言えません。

従来のやり方だと、そもそもスマホページはズームさせないように meta タグで user-scalable=no を設定していました。

しかし、これも iOS 側の配慮から、user-scalable=no が設定されていても無視されるようになっています。

そのため、今は focus による制御ができないと諦められがちですが、実はそんなことはありません。

実は以下の meta タグを入れると、focus してもズームしなくなります。

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

ポイントとなるのは maximum-scale=1.0 という値です。

これを設定することで、focus 時にはズームインしなくなります。
しかし、ピンチインすればしっかりズームインもできるのでご安心ください。
（本来、iOS 10 以降では無視される値だそうです。）

今回紹介した方法は、現時点での iOS に対して対処する指定であり、今後ブラウザの方針によってどうなるかはわかりません。

また、iOS は font-size が小さい状況を回避するためにズームインをする処理を入れているはずで、今回はそれに反した実装になるということを頭の片隅においておくべきです。

もしかしたら、入力モード時の font-size を見直してもよいのかもしれませんが、そこはデザイナーと密に連携を取りながら考えていくと良いと思います。