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