ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【スマホサイト作成】iPhoneでフォームにフォーカス時に画面拡大しない方法

iPhoneでテキストフォームにフォーカス時にズームされるのを見る女性

このブログのスマホ版のデザインでは、アイコンクリックで検索フォームを表示させています。ただiPhoneではテキストボックスにフォーカスすると勝手にズームされてしまい、しかも元に戻りません。この対処法を紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

このブログはWordPressを使って、自作テーマで運用しています。PCとスマホではデザインを切り替えています。テーマ制作については下の記事に書いてますので、参考にしてみてください。

【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介【WordPressテーマ】スマホサイト作成工程と役立ったツール類をご紹介

このブログはスマホ表示時には、便利なWordPressプラグイン「WPtouch…

【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法28 shares

スマホ用テーマデザインでサイト作成した時に実装した、表示の高速化に関するチップを…

スマホ版デザインでの検索フォーム表示方法

私はスマホで他のブログを見ている時に、検索フォームをあまり使いません。PCで見てる時はブログ内を深堀りすることはあるけど、スマホではそもそもブラウザで見る機会も少なくなってるように感じてます。

そんなわけで、スマホ用デザインでの検索フォームは必要な人だけに表示するような仕組みにしてます。具体的には最上部の検索アイコンをクリックしたら、検索フォームのテキストボックスが表示されます。

検索アイコンには軽量化のために「Webフォント」を使用しています。またアイコンフォントをクリックした時にふわっと表示されるのは「jQuery」を利用しています。それぞれの制作方法は下記事を参考にしてください。

ウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ53 shares

ブログやウェブサイト制作では、アイコン用にWebフォントの活用も増えてます。今回…

【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法

jQueryを使ってカテゴリーなどのナビゲーションメニューをふわっと出現させる方…

iPhoneで検索フォームにフォーカスすると拡大される現象

上のようにアイコンクリックで検索フォームを表示する場合だけでなく、最初からテキストボックスを設置しているケースでも、そのテキストボックスにフォーカス/focusすると、iPhoneでは自動的に画面が拡大されることがあります。

iPhoneでテキストフォームにフォーカス時にズームされるのを解消する方法

しかもテキストボックス以外へフォーカスを移しても、iPhoneでズームされた画面は元に戻りません。この現象は他のスマホでは起こらない、iPhone特有のものです。

どういう現象か説明しにくいので、実際にズームされる状態を作ってみました。下のテキストフォームをタップしてみてください。iPhoneの場合のみ横が広がり、グラグラしてしまいます。

ちなみに検索フォームを表示したら、自動的にそのテキストボックスにフォーカス/focusされて、カーソルもテキストボックス内に表示してます。その方法は、下のJavaScriptだけで実現できます。

ちなみにこの時の検索フォームのHTMLは下のとおりです。name属性にfocusメソッドを付けることにより、指定したテキストボックスがフォーカスされます。

iPhoneで画面ズームを回避する方法

さてこのように検索フォームのテキストボックスにフォーカスすると、iPhoneの場合だけ画面ズームされる現象ですが、簡単に回避する方法があります。

実は画面が拡大されるのは、フォントが小さくて見にくい場合にユーザビリティを考慮してのものだそうです。だから表示する時にフォントを大きく(16px以上)指定してやれば、それだけで回避できます。

私はスタイルシートで下のように指定して、フォーカス時の画面ズームを回避しています。

またはHTMLのhead内のviewportで、下のように「user-scalable=no」を指定する方法もあるようです。ただ画面のピンチイン・ピンチアウトでの拡大縮小が無効化されるため、個人的にはあまりオススメしません。

まとめ:今日のゆめぴょんの知恵

今回の記事内容をざっくり言うと。

  • iPhoneでテキストボックスにフォーカスするとズームされる
  • 画面ズームされたあと、元に戻らない
  • iPhoneのこの現象は、スタイルシートを工夫することにより回避できる

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】スマホサイトで生かす!カテゴリーの活用方法とSEO対策Googleアナリティクスでスマホ率やブラウザ割合を確認!アクセス解析の使い方入門3:次記事»
ページ
↑先頭
ホーム