iOSでinputにフォーカスしたらズームされちゃう仕様への対応(Next.jsだとどこに書くか)

iOSでinpuにフォーカスしたら勝手にズーム(ピンチアウト的な)されちゃいますよね。

入力する側はそれで便利なのかもしれないですが、横スクロールバー出ちゃったり、組み方によっては崩れたりもするのでできればズームしてほしくないときもあります。

根本的な解決

まず根本的な解決策として、フォントサイズを16px以上しか使っていなければあれは起こらないようです。アクセシビリティとかそういうものへの配慮からOSの仕様がそうなってるぽい。

なので、構築時にベースフォントサイズを16pxにして、それよりも小さいフォントサイズを使用する場合などはtransformなどで小さくしてやるといった対応が可能です。

でもそれだとちょっと不自由もあるかと思うので、以下小手先での解決。

小手先での解決

viewport指定にユーザー側でズームできないような記述を書きます。

それだけだと単純にズームできなくてユーザー側に不便なので、意図的にピンチしたときにはズームできるように別の記述もつけます。

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

以上で意図した動きとなりました。

これらはアクセシビリティには若干反する内容ですので、本来であればズームを禁止すべきではないというのが正しいマークアップだとは思います。時と場合を選んで使用するのがよいかと。

Next.jsだとどこに書く

さてこれをNext.jsだとどこに書くか。

ベースとしたテンプレがどうなっているか、自分で全部書いてるなら自分がどこに書いたかで異なるとは思いますが、僕が構築に使用したテンプレートだとheadをまとめて記述したmeta.tsxというコンポーネントがありましたので、そこに上記のタグを記述すると意図した位置に反映されました。