スマホで見るとフォントが小さくなってしまう箇所がある

Question

実現したいこと

レスポンシブ対応のサイトを作っています。
https://silverbeaver8.sakura.ne.jp/hikaku/index.html

スマホで見た際にフォントが最適化するようにしたいです。

発生している問題・分からないこと

PCで幅を狭くしてみても変わらないのですが、スマホで確認するとフォントサイズがかなり小さくなってしまいます。
初歩的な質問で申し訳ございませんが、お手伝いいただけますと幸いです。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

フォントサイズをremで指定しているので、例えば1080pxでレスポンシブに切り替わるようにfont-sizeを設定するとスマホで最適化できますが、PCでフォントが大きくなってしまいます。

補足

特になし

Answer 1

viewportを設定していないのが原因かと思われます。

HTMLのheadに下記のコードを追加してみてください。

<meta name="viewport" content="width=device-width,initial-scale=1">

html viewport とは - Google 検索

Comments

[ega7]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

Answer 2

フォントサイズがスマートフォンで小さくなる問題は、おそらくCSSのメディアクエリが正しく設定されていない可能性があります。メディアクエリは、特定の画面サイズやデバイスに応じて異なるスタイルを適用するために使用されます。

以下は、フォントサイズがスマートフォンで小さくなるのを修正するための基本的な手順です。

メディアクエリを使用して、スマートフォン用のフォントサイズを指定します。一般的なスマートフォンの画面幅に合わせて調整することが一般的です。例えば、以下のようなCSSコードを使用できます。

@media only screen and (max-width: 768px) {
  body {
    font-size: 16px; /* スマートフォン用のフォントサイズ */
  }
}

必要に応じて、他の要素（見出し、段落など）のフォントサイズも調整し、これらのスタイルをメディアクエリ内に追加してください

Comments

[ega7]

回答ありがとうございます。
非常に参考になりました。