iPhone（iOS）でtextareaやinputのフォーカス時にズームする理由と解決策
2020年06月22日 プログラミングTIPS
iPhoneで入力欄にカーソルを合わせたとき、自動的に画面がズームアップする機能があります。ユーザー側としては、勝手に拡大表示されて面白いなぁと思っていました。ところが、Webページ提供側から見ると、「勝手に拡大するな」と言いたくなるときもあります。このiPhoneでの「勝手に拡大する」「拡大しない」の違いは一体何なのか、調べてみました。
まず、Google Chromeのエミュレータから、スマホ向けのレスポンシブデザインのページを動作確認してみました。Chromeのエミュレータからだと、入力欄にカーソルを合わせても拡大しません。これだと、iPhoneの自動ズーム問題に気付かないことがあります。実機での動作確認は絶対に必要です。「スマホ表示だから拡大する」のではなく、「iOSだから拡大する」というApple側の仕様です。
調べてみたところ原因は、「フォーム入力欄のフォントサイズが16px未満だと、iOS側で勝手にズームする」という仕様になっていました。
原因がわかれば、対処方法は簡単です。一番簡単に解決する方法は、textareaやinputなどのフォントサイズを16px以上にすることです。単純明快です。
例えば、inputのテキストフォームにフォーカスを合わせたときに自動拡大させたくないなら、CSSでこのようにします。
input[type=text]{
font-size: 16px;
}
その他には、viewportにuser-scalable=noを設定する方法もなくはないですが、これはユーザビリティ的に良くありません。正常に動作する保証もありません。この方法は選択しない方が良いです。
「16pxでは文字が大きすぎるんだ！」というデザイナーの叫びを反映するには、裏技として、以下の方法が使えます。
「font-size: 16px;」にプラスして、「transform:scale(0.8);」などに縮小して騙すという方法です。この方法を使えば、文字が小さいまま入力欄でズームさせずに入力してもらえます。ただし、transformの設定値によりinput全体が小さくなりますので、inputの大きさ自体を変えたくない場合にはさらに調整が必要となります。また、「文字の小さい入力欄は正解なのか？」というユーザービリティの面の問題があります。
iOSでは基本的に、アップルの仕様に沿って、入力欄の文字の大きさは16px以上が良いのではないかと思います。
なお、以下のページで、勝手にズームしない入力欄の動きを確認できます。
以下のページでは、勝手にズームする入力欄の動きを確認できます。
「勝手にズームする＝悪」だとは思いませんので、使い分けだと思います。
「16pxでは文字が大きすぎるんだ！」というデザイナーの叫びを反映するには、裏技として、以下の方法が使えます。
input[type=text]{
font-size: 16px;
transform: scale(0.8);
}iOSでは基本的に、アップルの仕様に沿って、入力欄の文字の大きさは16px以上が良いのではないかと思います。
なお、以下のページで、勝手にズームしない入力欄の動きを確認できます。
以下のページでは、勝手にズームする入力欄の動きを確認できます。
「勝手にズームする＝悪」だとは思いませんので、使い分けだと思います。