スマホで文字サイズが勝手に大きくなる。そんな時は?
ホームページ
2015.12.03
原因
この機能単体なら便利なのですが、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を記述
body {
-webkit-text-size-adjust: 100%;
}
ページ全体にCSSを適用したいので、<body>タグに記述しましょう。
最近は、1つのサイトであらゆるデバイスに対応させる「レスポンシブ・ウェブ・デザイン」も広まっています。
様々なデバイスからサイトを見られる可能性は想定しておかないといけません。
高齢者など視力の悪い人に対して、文字を大きくして見やすさを重視するのも1つの策かもしれませんが、
それでサイト全体のバランスを崩してしまっては本末転倒と言えます。
また、今回紹介した現象は、スマートフォンの実機で閲覧した際に発生するもののため、
PCのプレビューだけを使ってスタイルを確認していると見落としやすいので、注意が必要です。
スマートフォン対応のサイトを作る時は、必ず実機での状態を確認する様にしましょう。
WEB制作会社でフロントエンドエンジニアを務める。
あなたにおススメの記事
このカテゴリの新着記事
- ALL
- PCトラブル
- ネットトラブル
- パソコンスキル
- ホームページ
-
No.1
ホームページ
2015.12.04
-
No.2
PCトラブル
2015.09.29
-
No.3
PCトラブル
2016.02.03
-
No.4
PCトラブル
2015.08.21
-
No.5
PCトラブル
2015.09.29
-
No.1
PCトラブル
2015.09.29
-
No.2
PCトラブル
2016.02.03
-
No.3
PCトラブル
2015.08.21
-
No.4
PCトラブル
2015.09.29
-
No.5
PCトラブル
2015.09.29
-
No.1
ネットトラブル
2015.10.03
-
No.2
ネットトラブル
2015.10.03
-
No.3
ネットトラブル
2015.10.03
-
No.4
ネットトラブル
2015.10.03
-
No.5
ネットトラブル
2015.10.03
-
No.1
ホームページ
2015.12.04
-
No.2
ホームページ
2015.12.03
-
No.3
ホームページ
2015.12.01
-
No.4
ホームページ
2015.12.06
-
No.5
ホームページ
2016.01.17
- ALL
- PCトラブル
- ネットトラブル
- パソコンスキル
- ホームページ
-
No.1
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.2
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.3
PCトラブル
2015.09.29
★ 1
コメント(1)
-
No.4
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.5
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.1
PCトラブル
2015.09.29
★ 1
コメント(1)
-
No.2
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.3
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.4
PCトラブル
2016.10.01
★ 0
コメント(0)
-
No.5
PCトラブル
2016.10.01
★ 0
コメント(0)
-
No.1
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.2
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.3
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.4
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.5
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.1
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.2
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.3
ホームページ
2016.03.20
★ 0
コメント(0)
-
No.4
ホームページ
2016.02.20
★ 0
コメント(0)
-
No.5
ホームページ
2016.02.12
★ 0
コメント(0)
この記事へのコメント
コメント(0)
※利用規約に違反するコメントを確認された場合はご報告ください