トラストバンク開発部・フロントエンドチームの君田(きみた)です。
本日は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設定に関しては以下で紹介されています。
また、各モバイルデバイスのviewport一覧は以下で紹介されています。
最後に
弊社トラストバンクでは様々な職種で絶賛採用中です! 気になった方、是非お気軽にご連絡ください!