HTML
📱 metaタグのviewportが効かない
viewport の指定が間違っている
😰 こんな症状
スマホで見るとページが小さく表示される。viewportの設定が正しくないときに起きるよ。
🔍 原因
viewport メタタグが head 内にないか、content属性の値が間違っているよ。このタグがないとブラウザはPC向けの幅（通常980px）でページを描画し、スマホでは縮小表示されるんだ。
❌ エラーが起きるコード
<head>
<title>My Page</title>
</head>
<!-- viewport メタタグがない -->✅ 直し方
1. head 内に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加する。 2. content の値にスペルミスがないか確認する。 3. body 内ではなく head 内に書く。
✅ 修正後のコード
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>この解決法は役立ちましたか？
🔗 関連するエラー
- input要素のtype属性ミスで入力欄が意図通りにならない — type属性のスペルミス
- フォームバリデーションが効かない — formタグの外にinputがある
- loading="lazy"が効かない — ファーストビューの画像に指定している
- 画像が遅延読み込みされない — loading="lazy" が効いていない
- input の autocomplete が効かない — inputのautocomplete属性が効かない
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説