iOSでテキストフォームをタップしてフォーカスした時、ページ（の文字サイズ）が拡大表示される問題を回避する方法のご紹介です。
テキストフォームに文字を入れようとすると拡大表示される
iPhone でウェブサイトを見ていて、テキストフォームにタップしたら…
こんな感じでズームしてしまう経験はないでしょうか。
meta viewport にuser-scalable=no を指定する
以下のように、<head>タグ内のmeta viewportでuser-scalable=noを指定することで、ズームを回避することが可能です。
但し、こちらはページのズーム機能自体をOFFにしてしまうので、ユーザービリティの観点からあまりオススメはできません。
CSSでinputタグにfont-sizeを指定する
iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象についての記事で紹介されていたように、bodyのフォントサイズには関係なく、フォームのフォントサイズが16px以上だと自動ズームは発生しなくなるとのことです。と言うことで、以下のようにinput タグに
font-sizeを指定します。当ブログでも、この方法でズーム問題を解決することができました。
参考ページ
iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象について
コメント