CSS
📱 スマホで表示が小さい
viewport meta タグがない
😰 こんな症状
スマホで見るとページ全体が縮小されて表示される。
🔍 原因
HTML の <head> に viewport の meta タグが書かれていない。
❌ エラーが起きるコード
<head>
<title>My Page</title>
</head>
<!-- viewport meta がなくスマホで縮小表示される -->✅ 直し方
<head> に <meta name="viewport" content="width=device-width, initial-scale=1.0"> を追加する。
✅ 修正後のコード
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>この解決法は役立ちましたか？
🔗 関連するエラー
- スタイルが特定の要素に当たらない — セレクタ名のタイポ
- 余白がおかしい — margin と padding の混同
- Flexbox でレイアウトが崩れる — display: flex を子要素に書いている
- 幅を指定したのにはみ出す — box-sizing が content-box のまま
- z-index が効かない — position が設定されていない
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説