CSS

📱 スマホで表示が小さい

viewport meta タグがない

😰 こんな症状

スマホで見るとページ全体が縮小されて表示される。レスポンシブ対応を始めるときに起きやすいよ。

🔍 原因

HTMLの<head>にviewportのmetaタグが書かれていないよ。このタグがないとブラウザはページをPC幅（通常980px）で描画し、スマホの小さな画面に縮小して表示するんだ。そのため文字が小さくなり読めなくなるよ。

❌ エラーが起きるコード

<head>
  <title>My Page</title>
</head>
<!-- viewport meta がなくスマホで縮小表示される -->

✅ 直し方

1. <head>に<meta name="viewport" content="width=device-width, initial-scale=1.0">を追加する。 2. CSSでwidth: 100%やmax-widthを使い、固定幅(px)を避ける。 3. スマホの実機またはDevToolsのデバイスモードで表示を確認する。

✅ 修正後のコード

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Page</title>
</head>

この解決法は役立ちましたか？

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

CSSコースで基礎から学ぶ →

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
CSSとは？初心者向けにわかりやすく解説 — 文字の色・大きさの変え方
CSSでWebページにスタイルを付ける方法 — 色やフォントを付ける手順を解説

📖 関連する用語

🚀 CSSコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

CSSコースを始める →