MENU
CLOSE
CODEWEBSITE Edit : 2022.03.31 Update : 2023.01.30

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

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

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

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

解決策

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

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

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

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。