iOSのinputとtextareaクリック時にズームされてしまうのを防ぐ

トラストバンク開発部・フロントエンドチームの君田(きみた)です。

本日はiOSにて入力フィールドをクリックした時に自動でズームされてしまう挙動を防ぐ方法を書いていこうと思います。

iOSでは入力フィールドの文字サイズ(font-size)が16px以下だとズームされる

iOSの挙動では入力フィールドの文字サイズによって、少し画面がズームされます。 見出しにもあるとおり、具体的には16px以下の文字サイズを設定しているとクリック時にズームされます。

実際の挙動はこんな感じです。 (現状のふるさとチョイスでは以下の挙動は起こりません。疑似的にズームされるようにしています。) ズームの挙動

この挙動をそのまま保持したい場合はなんの問題もないですが、「ズームされたくないけど、文字サイズは小さくしたい!」 というような要望があった場合、ズームされるのを防がなければなりません。

ズームされるのを防ぐ解決策

metaタグのviewport設定を以下のように記述することで入力フィールドの文字サイズを16px以下にした場合でもズームされることを防ぐことができます。

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

maximum-scale=1.0を設定することによりズームされるのを防ぐことができます。 ピンチインによるズームは使用可能な状態のままのですので、ご安心ください。

そのほかのviewport設定に関しては以下で紹介されています。

developer.mozilla.org

また、各モバイルデバイスのviewport一覧は以下で紹介されています。

experienceleague.adobe.com

最後に

弊社トラストバンクでは様々な職種で絶賛採用中です! 気になった方、是非お気軽にご連絡ください!

www.wantedly.com