企業様向けサイトなどを制作していると、PCファーストでサイトを制作してください、というご依頼もたまにあります。
今回の現象は、PCで表示されることをメインで制作したサイトをスマホでみた際に、「文字がおっきくなったり小さくなったりチカチカしている」「スマホでみるとcssで設定したフォントサイズよりなぜか大きく見える」などの場合に、解決できるかもしれない方法です。
事象が起こるサイトの特徴
・PCファーストのサイト。
・SPでの表示は、レスポンシブではなくPCの表示をそのまま表示する仕様。
解決策
１．-webkit-text-size-adjustの設定
|
1 2 3 |
body { -webkit-text-size-adjust: 100%; } |
モバイル端末のことを考慮していないサイトでは、モバイル端末のブラウザの多くがテキストを拡大表示して読みやすくします。
text-size-adjustプロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。
この設定のみでは、私の場合は修正できませんでした。
２．viewportの設定
|
1 |
<meta name="viewport" content="width=1280"> |
私が担当したサイトでは、横幅1280pxの時の見え方をスマホでみた際もしてほしかったので、上記の指定を設定しました。
viewportはもともと設定している方も多いと思うのですが、今回の事象を解決するためのポイントは「content=”width=1280″」の箇所です。
ちゃんとwidthを設定することが重要でした。
これで、スマホでサイトをみた時の文字のチカチカ＆拡大表示を修正することができました。
