サイトマップ

スマホで文字サイズが勝手に大きくなる。そんな時は？

会員ログイン 新規会員登録Q&Aサイトマップ
検索
ログイン

スマホで文字サイズが勝手に大きくなる。そんな時は？

ホームページ

2015.12.03

コメント（0）

お気に入りに追加

★1

スマホで文字サイズが勝手に大きくなる。そんな時は？
関連キーワード： ダメサイト　処方箋
スマートフォンやタブレットなど、あらゆる媒体でも問題なくWEBサイトを表示出来る様にするのは、今や必須項目です。 しかし、スマートフォンでサイトを見た際に、設定していた値よりも文字サイズが大きくなるっている事ってありませんか？

原因

iPhoneやAndroidでは、WEBサイトのテキストを読みやすい様に自動で大きさを調整する機能が入っています。
この機能単体なら便利なのですが、WEBサイトでは「font-size:○○px;」のCSSで文字サイズを指定しているため、 文字が勝手に拡大されてしまうとサイト全体のバランスに影響が出てしまいます。

対策

この現象を回避するには、CSSの「-webkit-text-size-adjust」プロパティを設定する必要があります。
「-webkit-text-size-adjust」とは、文字サイズの制御に関するプロパティで、デフォルトの値は「auto（自動調整を行う）」に設定されています。

「-webkit-text-size-adjust」で指定出来る値は、以下の通りです。

・auto→文字サイズの自動調整を行います
・none→文字サイズの自動調整を行いません
・○○%→フォントサイズに対する％で指定します

値を「none」にした場合、スマホでの文字サイズ調整は確かになくなりますが、今度はPCで見た際に拡大・縮小に問題が発生してしまいます。
PCで閲覧している際に画面を拡大・縮小しても、画面に合わせて文字サイズが変動しなくなるのです。
そのため、フォントサイズそのままの値となる「100%」を設定しましょう。

CSSを記述

任意のスタイルシートに、以下の記述を追加する事で、「-webkit-text-size-adjust」の値を100%に指定します。

body {
-webkit-text-size-adjust: 100%;
}

ページ全体にCSSを適用したいので、<body>タグに記述しましょう。

最近は、1つのサイトであらゆるデバイスに対応させる「レスポンシブ・ウェブ・デザイン」も広まっています。
様々なデバイスからサイトを見られる可能性は想定しておかないといけません。

高齢者など視力の悪い人に対して、文字を大きくして見やすさを重視するのも1つの策かもしれませんが、
それでサイト全体のバランスを崩してしまっては本末転倒と言えます。

また、今回紹介した現象は、スマートフォンの実機で閲覧した際に発生するもののため、
PCのプレビューだけを使ってスタイルを確認していると見落としやすいので、注意が必要です。
スマートフォン対応のサイトを作る時は、必ず実機での状態を確認する様にしましょう。

お気に入りに追加

14-river

WEB制作会社でフロントエンドエンジニアを務める。

このカテゴリ注目のキーワード

SEO対策 CVRアップ ブランディング 制作業者　選び方 名誉毀損 通販　売上げアップ ホームページ　自分で更新 CMS導入 集客数アップ ダメサイト　処方箋 スモールビジネス サロン系 個人事業主 無料

あなたにおススメの記事

この記事へのコメント

コメント（0）

※利用規約に違反するコメントを確認された場合はご報告ください

ログインしてコメントを書く
まだコメントはありません。

このカテゴリの新着記事

今すぐどうにかしたい方へおススメ
パソコンが重すぎて仕事にならない今すぐ何とかしたい！誹謗中傷検索順位がズドンと落ちた！
アクセス数ランキング
  • ALL
  • PCトラブル
  • ネットトラブル
  • パソコンスキル
  • ホームページ
コメント数ランキング
  • ALL
  • PCトラブル
  • ネットトラブル
  • パソコンスキル
  • ホームページ
注目のキーワード ネット炎上 ネットトラブル 突然落ちる PC高速化 データ復元 セキュリティ対策 ウィンドウズ10
注目のキーワードをもっと見る
パソコントラブル解決マルウェア対策ネットトラブル解決誹謗中傷対策パソコンのスキルアップ楽しみ方・活用法ホームページWEB活用ノウハウ
pagetop