【CSS】スマホで一部文字サイズが大きくなる場合の解消方法を紹介

CSS

コーディング時にスマホでサイト表示を確認すると、同じフォントサイズを指定しているのに一部文字サイズが違うことがあると思います。(私もスクロールできる表を追加したときに、この現象になりました。)今回はフォントサイズ通りに表示するための方法を紹介します。

原因の一つと考えられるのが、スマホのブラウザ文字調節機能が働いている場合です。この機能が不要な場合は以下CSSを追加してみてください。

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

常にfont-sizeの指定100%で文字を表示するよ~ってイメージですね。

body全体にあてていますが、指定のクラスなどでも大丈夫です。

コーディングでお困りなら、、、

コーディングの実装でお困りの場合は https://coding-shop.net/contact/ こちらよりお問い合わせください。

コーディングの委託も承っております。お仕事に関するお問い合わせも上記リンクよりお気軽にご連絡ください。

タイトルとURLをコピーしました