• RSS

[CSS]iOS でフォームにフォーカスした時の自動ズーム問題を回避する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

iOS でテキストフォームをタップしてフォーカスした時、ページ(の文字サイズ)が拡大表示される問題を回避する方法のご紹介です。

テキストフォームに文字を入れようとすると拡大表示される

iPhone でウェブサイトを見ていて、テキストフォームにタップしたら…
iOS でフォームにフォーカスした時の自動ズーム問題を回避する方法

こんな感じでズームしてしまう経験はないでしょうか。
iOS でフォームにフォーカスした時の自動ズーム問題を回避する方法

meta viewport にuser-scalable=no を指定する

以下のように、<head>タグ内のmeta viewport でuser-scalable=no を指定することで、ズームを回避することが可能です。

但し、こちらはページのズーム機能自体をOFF にしてしまうので、ユーザービリティの観点からあまりオススメはできません。


CSS でinput タグにfont-size を指定する

iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象について の記事で紹介されていたように、bodyのフォントサイズには関係なく、フォームのフォントサイズが16px以上だと自動ズームは発生しなくなるとのことです。

と言うことで、以下のようにinput タグにfont-sizeを指定します。
当ブログでも、この方法でズーム問題を解決することができました。




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください