MENU
CLOSE
システムユーザビリティ Edit : 2022.03.31 Update : 2024.11.07

PCファーストのサイトをスマホで見たときに、文字が拡大しているときの対処法

企業様向けサイトなどを制作していると、PCファーストでサイトを制作してください、というご依頼もたまにあります。
今回の現象は、PCで表示されることをメインで制作したサイトをスマホでみた際に、「文字がおっきくなったり小さくなったりチカチカしている」「スマホでみるとcssで設定したフォントサイズよりなぜか大きく見える」などの場合に、解決できるかもしれない方法です。

事象が起こるサイトの特徴

・PCファーストのサイト。
・SPでの表示は、レスポンシブではなくPCの表示をそのまま表示する仕様。

解決策

1.-webkit-text-size-adjustの設定
モバイル端末のことを考慮していないサイトでは、モバイル端末のブラウザの多くがテキストを拡大表示して読みやすくします。text-size-adjustプロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。
この設定のみでは、私の場合は修正できませんでした。

2.viewportの設定
私が担当したサイトでは、横幅1280pxの時の見え方をスマホでみた際もしてほしかったので、上記の指定を設定しました。
viewportはもともと設定している方も多いと思うのですが、今回の事象を解決するためのポイントは「content=”width=1280″」の箇所です。
ちゃんとwidthを設定することが重要でした。

これで、スマホでサイトをみた時の文字のチカチカ&拡大表示を修正することができました。

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。