【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法
  • 【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法
  • 記事公開:2016/02/09
  • 最終更新:2016/02/11

【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法

iPhoneでWEBサイトの検索フォームを利用する場合など、自動的に画面が拡大されてしまいます。この機能、便利に感じる場合もありますが、ちょっと【うっとおしい】とかんじる場合もあります。今回は、この画面拡大を回避する方法のご紹介です。

この記事は約 2 分で読めます。

iPhoneで検索フォームなどを利用すると画面が拡大される理由とは?

とある案件でクライアント様からご希望をいただきました。

WEBサイトの検索フォームを利用するとき、iPhoneだと勝手に画面が拡大される。
勝手に拡大しないようにしてほしい!

やり方が分からなかったので調べてみました。
勝手に拡大させない方法をシェアします。

iPhoneが勝手に画面を拡大する理由ですが、これは「ユーザビリティ」の問題です。
フォントが小さいと見えにくいでしょ!とiPhoneが気を利かしてくれているようです。

理由さえ分かってしまえば、画面の拡大を回避する方法は簡単ですね。
ユーザビリティを損なわない程度のフォントサイズを設定してやればOKです。

調べてみると【16px】以上のフォントサイズを指定してやれば、画面拡大はされませんでした。

つまり、勝手に画面を拡大させないためには、そのフォームのフォントサイズを【16px以上】に設定してやれば良いのです。

font-size: 16px;

上記のコードでフォントサイズを16px以上に設定してやってください。

まとめ

【iPhone対策】フォームを入力するとき画面の拡大を防ぐ方法をご紹介しました。

個人的に経験があるのですが、スマホから検索フォームなどを入力するとき、画面が拡大すると正直使いにくく感じてしまいます。簡単に回避できるようなので、このサイトでも対策をしてみるつもりです。

今回の記事がどなたかのお役に立つと幸いですね。

この記事が気に入ったら【いいね】しよう!

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • display:inline-blockで思う様に横並びにならない理由と解決方法

    2017-07-22

    display: inline-blockで要素を横並びにしたいのに、思う様に横並びにならないことってありませんか?実はHTMLの記述方法が原因で横並びにならないことがあるのです。原因と解決方法を詳しく解説してみました。 記事を読む

  • ランディングページでも使える!JavaScriptで作るカウントダウンタイマー

    2016-03-27

    JavaScriptで作るカウントダウンタイマーをご紹介します。ランディングページなどにカウントダウンタイマーを設置したい方は参考にしてください。1分後には本格的なカウントダウンタイマーの設置方法をマスターすることが出来ます。 記事を読む

  • CSSだけでHTMLのbrタグを無効にする方法

    2016-02-14

    CSSだけでHTMLのbrタグを無効にする方法をご紹介します。レスポンシブサイトなど、スマホ表示の場合のみbrタグを削除したい場合など重宝します。1分で理解できる無いようですので、サクッと身につけてしまいましょう。 記事を読む

  • ハイクオリティ!お金を出す価値のある有料素材配布サイトを12個まとめてみた

    2015-10-01

    WEBデザインに欠かせない有料素材の販売サイトをまとめてみました。WEBサイトの制作を行うに当たって、有料素材の購入は避けては通れません。参考にしてください。 記事を読む

  • 簡単便利!ダミー画像を作成するなら【placehold.jp】で決まり!

    2016-01-10

    ダミー画像を簡単に作成することのできる【placehold.jp】をご紹介します。簡単な操作でダミー画像がサクッと作成できる無料サービス。WEBサイトの制作などダミー画像が必要になったら【placehold.jp】がめちゃ便利です。 記事を読む

コメントを残す


(必須)

CAPTCHA