iPhoneでテキストボックスに入力するとき（「width=device-width」とかで「 maximum-scale」が1より上の場合）、ボックス内にフォーカスが移ると、画面がズームされます。
↑こんな画面のテキストボックスに入力しようとすると…
↑こうなる（ちょっとズームアップしてしまいます＞＜）
テキスト入力完了後、元のスケールに戻ってくれれば良いのですが、そんな気の利いたギミックはありませんので…
というわけでズームアップを防ぐ方法のひとつとして語り継がれているのが、テキストボックスのフォントサイズを「16px」にするというワザです。フォントサイズが「16px」もあればよく見えるだろうからズームアップはしないでおこう、ということでしょうか…
|
1 2 3 4 5 6 7 |
@media screen and (min-width: 0px) and (max-device-width: 320px) { input[type=text],input[type=password] { font-size: 16px; } } |
上記スタイル定義により幅320px以下のデバイス（iPhone）だけ、フォントサイズを16pxにすることが可能です。
↑テキスト入力時にズームアップしない！