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

公開:2020/12/03
更新:2020/12/03
1 min読了の目安(約1500字TECH技術記事

こんにちは。ひらやま(@rhirayamaaan)です。

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

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

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

font-size16px にすればズームインしない

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

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

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

iOSでinputのフォーカス時に画面がズームするのを防ぐ

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

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

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

meta タグの viewport を見直す

従来のやり方だと、そもそもスマホページはズームさせないように 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 以降では無視される値だそうです。)

maximum-scale にかんしてはこちらをご覧ください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta

さいごに

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

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

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