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